메시지 보드 기능을 생성하기 위한 Ajax와 mysql 데이터 상호작용
이 글은 게시판 기능을 구현하기 위해 주로 Ajax와 mysql 데이터 상호 작용을 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.
최근에 Ajax를 구현하기 위한 작은 데모를 만들었고 MySQL 데이터 상호 작용을 위해 jq는 js부분은 php를 배경으로 사용하고, 데이터베이스는 mysql을 사용해서 나중에 node+mongodb 버전을 올려보도록 하겠습니다.
mysql의 사용 및 설치에 대해서는 자세히 설명하지 않겠습니다. Baidu xampp, Apache 서버 및 mysql 데이터베이스를 직접 통합했는데 매우 사용하기 쉽습니다.
먼저 서버와 데이터베이스를 엽니다. 먼저 여기에 "11" 데이터베이스를 만든 다음 마이크로블로그라는 테이블을 만들었습니다. (참고: 여기서는 높은 버전의 mysql을 사용하고 있으며 데이터베이스에 연결하는 방법은 PHP입니다. 모두 mysqli_ 입니다. 버전이 너무 낮다면 mysql_ 메소드를 이용해서 직접 코드를 수정해주세요.)
코드 부분은 다음과 같습니다:
html 페이지와 js 부분:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>微博留言板</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 600px;
/*height: 500px;*/
border: 2px solid rgb(85,85,85);
border-radius: 15px;
margin: 50px auto;
padding: 20px 10px 15px;
background-color: rgb(85,85,85);
}
#content{
display: block;
resize: none;
width: 550px;
height: 200px;
margin: 0 auto;
border: 2px solid rgb(225,225,225);
border-radius: 10px;
text-align: center;
font-size: 30px;
background-color: rgb(225,225,225);
}
#content:focus{
outline: none;
border: 2px solid rgb(225,225,225);
box-shadow: 0 0 15px rgb(225,225,225);
}
#btn{
border: 2px solid rgb(255,204,0);
width: 80px;
height: 40px;
border-radius: 5px;
margin-top: 30px;
font-size: 17px;
cursor: pointer;
outline: none;
background-color: rgb(255,204,0);
}
.list{
list-style: none;
background-color: rgb(249,249,249);
margin-top: 20px;
}
.list>li{
padding: 20px 10px 10px;
border-bottom: 2px solid rgb(68,68,68);
font-size: 20px;
color: rgb(200,214,225);
position: relative;
word-break: break-word;
word-wrap: break-word;
background-color: rgb(85,85,85);
}
.list>li>.control{
position: absolute;
bottom: 3px;
right: 5px;
font-size: 14px;
}
.list>li>p{
margin-bottom: 25px;
}
.control span,.control em{
display: inline-block;
margin-right: 15px;
}
.control em{
color: darkblue;
cursor: pointer;
}
a{
text-decoration: none;
color: darkred;
}
#page>a{
display:inline-block;
width: 40px;
height: 30px;
margin-top: 10px;
text-align: center;
line-height: 30px;
font-size: 20px;
border-radius: 5px;
color: white;
background-color: rgb(51,21,70);
}
#head{
color: rgb(200,214,225);
font-size: 30px;
height: 50px;
border-bottom: 2px solid rgb(68,68,68);
margin-bottom: 20px;
}
</style>
</head>
<body>
<p id="box">
<p id="head">
留言板
</p>
<p id="fill_in">
<textarea id="content"></textarea>
<button id="btn">提交留言</button>
</p>
<!--留言列表-->
<p id="message_text">
<ul class="list">
</ul>
</p>
<!--分页-->
<p id="page">
<a href="javasript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>
<a href="javasript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
</p>
</p>
</body>
<script src="Jq/jquery-3.1.1.min.js">
</html>코드가 완전히 표시되지 않습니다. 다음은 코드의 PHP 부분입니다.
계속 01부, jq의 ajax 요청:
<script type="text/javascript">
$(function(){
$("#btn").on("click",function(){
if ($("#content").val() == "") {
alert("~~客官，说一句再走呗~~");
return;
}
else{
$.ajax({
type:"get",
url:"http://localhost/phpStudy/ajax03/message.php",
async:true,
dataType:"json",
data:{
content:$("#content").val(),
act:"add"
},
success:function(data){
// var result = JSON.parse(data);
if (data.error==0) {
createLi(data.id,$("#content").val(),data.time);
} else{
alert(data.msg);
}
}
});
}
});
//创建节点
function createLi(id,content,time){
var html = $('<li><p>'+content+'</p><p class="control"><span>时间：'+time+'</span>顶：<em>0</em>踩：<em>0</em><a class="remove" href="javasript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></p></li>');
$(".list").prepend(html);
var h = html.height();
html.height(0);
html.stop().animate({
height:h
},300);
//删除
html.find(".remove").on("click",function(){
html.stop().animate({
height:0
},300,function(){
html.remove();
})
});
}
})
</script>이 부분은 PHP 코드 부분입니다:
<?php
header("Content-type:text/html;charset=utf8");
date_default_timezone_set("PRC");
//链接数据库
$link = mysqli_connect("localhost", "root", "", "eleven");
//设置数据库编码格式
mysqli_query($link, "set names utf8");
?>참고: 이 부분은 다른 일을 배울 때 호출했기 때문에 공개 코드로 작성했습니다. 따라서 다음 코드는 will have
include_once "comment.php";
이 줄은 다른 코드를 나타냅니다.
0){
$arr = ["error"=>0,"id"=>$insertId,"time"=>$times];
echo json_encode($arr);//将数组转化为json，方便前端使用
}
else{
$arr = ["error"=>1,"msg"=>"留言失败，请重试!"];
echo json_encode($arr);//将数组转化为json，方便前端使用
}
break;
case 'up':
$id = $_GET['id'];
$search = "SELECT up FROM microblog WHERE id = $id";
$result = mysqli_query($link, $search);
$upNum = mysqli_fetch_row($result)[0];
$upNum++;
$query = "UPDATE microblog SET up='{$upNum}' WHERE id = '{$id}'";
mysqli_query($link,$query);
if(mysqli_affected_rows($link)){//更新数据成功
echo '{"error":"0"}';
}
else{//更新失败
echo '{"error":"1","msg":"点赞失败！"}';
}
break;
case 'down':
$id = $_GET['id'];
$search = "SELECT down FROM microblog WHERE id = $id";
$result = mysqli_query($link, $search);
$downNum = mysqli_fetch_row($result)[0];
$downNum++;
$query = "UPDATE microblog SET down='{$downNum}' WHERE id = '{$id}'";
mysqli_query($link,$query);
if(mysqli_affected_rows($link)){//更新数据成功
echo '{"error":"0"}';
}
else{//更新失败
echo '{"error":"1","msg":"踩失败！"}';
}
break;
case 'remove':
$id = $_GET['id'];
$query ="DELETE FROM microblog WHERE id='{$id}'";
mysqli_query($link,$query);
if(mysqli_affected_rows($link)>0){//删除数据成功
echo '{"error":"0"}';
}
else{
echo '{"error":"1","msg":"删除失败！"}';
}
break;
case 'count'://返回总页码
$query = "SELECT count(id) FROM microblog";
$result = mysqli_query($link, $query);
$count = mysqli_fetch_row($result)[0];//以索引数组形式返回查询结果
$countPage = ceil($count/5);
echo '{"error":"0","countPage":"'.$countPage.'"}';
break;
case 'page'://点击分页或者是页面第一次加载
$index = $_GET["num"]*5;
$search = "SELECT * FROM microblog ORDER BY id DESC LIMIT {$index},5";//倒叙查询留言
$result = mysqli_query($link, $search);
$arr = [];//存查询出来的数据
while($row = mysqli_fetch_assoc($result)){
array_unshift($arr,$row);
}
// print_r($arr);
// {"error":"0","info":[{},{},{},{},{}]}
$resultArr = ["error"=>"0","info"=>$arr];
echo json_encode($resultArr);
break;
}
?>위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
json 문자열 및 json 배열에 응답하는 ajax의 예(그래픽 튜토리얼)
위 내용은 메시지 보드 기능을 생성하기 위한 Ajax와 mysql 데이터 상호작용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7333
9
1627
14
1351
46
1263
25
1209
29
PHP에서 MySQL 쿼리 성능을 최적화하는 방법은 무엇입니까?
Jun 03, 2024 pm 08:11 PM
선형 복잡성에서 로그 복잡성까지 조회 시간을 줄이는 인덱스를 구축하여 MySQL 쿼리 성능을 최적화할 수 있습니다. SQL 삽입을 방지하고 쿼리 성능을 향상하려면 PREPAREDStatements를 사용하세요. 쿼리 결과를 제한하고 서버에서 처리되는 데이터의 양을 줄입니다. 적절한 조인 유형 사용, 인덱스 생성, 하위 쿼리 사용 고려 등 조인 쿼리를 최적화합니다. 쿼리를 분석하여 병목 현상을 식별하고, 캐싱을 사용하여 데이터베이스 로드를 줄이고, 오버헤드를 최소화합니다.
PHP에서 MySQL 백업 및 복원을 사용하는 방법은 무엇입니까?
Jun 03, 2024 pm 12:19 PM
PHP에서 MySQL 데이터베이스를 백업하고 복원하는 작업은 다음 단계에 따라 수행할 수 있습니다. 데이터베이스 백업: mysqldump 명령을 사용하여 데이터베이스를 SQL 파일로 덤프합니다. 데이터베이스 복원: mysql 명령을 사용하여 SQL 파일에서 데이터베이스를 복원합니다.
PHP를 사용하여 MySQL 테이블에 데이터를 삽입하는 방법은 무엇입니까?
Jun 02, 2024 pm 02:26 PM
MySQL 테이블에 데이터를 삽입하는 방법은 무엇입니까? 데이터베이스에 연결: mysqli를 사용하여 데이터베이스에 대한 연결을 설정합니다. SQL 쿼리 준비: 삽입할 열과 값을 지정하는 INSERT 문을 작성합니다. 쿼리 실행: query() 메서드를 사용하여 삽입 쿼리를 실행하면 확인 메시지가 출력됩니다.
MySQL 8.4에서 mysql_native_password가 로드되지 않음 오류를 수정하는 방법
Dec 09, 2024 am 11:42 AM
MySQL 8.4(2024년 최신 LTS 릴리스)에 도입된 주요 변경 사항 중 하나는 "MySQL 기본 비밀번호" 플러그인이 더 이상 기본적으로 활성화되지 않는다는 것입니다. 또한 MySQL 9.0에서는 이 플러그인을 완전히 제거합니다. 이 변경 사항은 PHP 및 기타 앱에 영향을 미칩니다.
PHP에서 MySQL 저장 프로시저를 사용하는 방법은 무엇입니까?
Jun 02, 2024 pm 02:13 PM
PHP에서 MySQL 저장 프로시저를 사용하려면: PDO 또는 MySQLi 확장을 사용하여 MySQL 데이터베이스에 연결합니다. 저장 프로시저를 호출하는 문을 준비합니다. 저장 프로시저를 실행합니다. 결과 집합을 처리합니다(저장 프로시저가 결과를 반환하는 경우). 데이터베이스 연결을 닫습니다.
PHP를 사용하여 MySQL 테이블을 만드는 방법은 무엇입니까?
Jun 04, 2024 pm 01:57 PM
PHP를 사용하여 MySQL 테이블을 생성하려면 다음 단계가 필요합니다. 데이터베이스에 연결합니다. 데이터베이스가 없으면 작성하십시오. 데이터베이스를 선택합니다. 테이블을 생성합니다. 쿼리를 실행합니다. 연결을 닫습니다.
오라클 데이터베이스와 mysql의 차이점
May 10, 2024 am 01:54 AM
Oracle 데이터베이스와 MySQL은 모두 관계형 모델을 기반으로 하는 데이터베이스이지만 호환성, 확장성, 데이터 유형 및 보안 측면에서 Oracle이 우수하고, MySQL은 속도와 유연성에 중점을 두고 중소 규모 데이터 세트에 더 적합합니다. ① Oracle은 광범위한 데이터 유형을 제공하고, ② 고급 보안 기능을 제공하고, ③ 엔터프라이즈급 애플리케이션에 적합하고, ① MySQL은 NoSQL 데이터 유형을 지원하고, ② 보안 조치가 적고, ③ 중소 규모 애플리케이션에 적합합니다.
PHP 대 Ajax: 동적으로 로드되는 콘텐츠를 생성하기 위한 솔루션
Jun 06, 2024 pm 01:12 PM
Ajax(비동기 JavaScript 및 XML)를 사용하면 페이지를 다시 로드하지 않고도 동적 콘텐츠를 추가할 수 있습니다. PHP와 Ajax를 사용하면 제품 목록을 동적으로 로드할 수 있습니다. HTML은 컨테이너 요소가 있는 페이지를 생성하고 Ajax 요청은 로드한 후 요소에 데이터를 추가합니다. JavaScript는 Ajax를 사용하여 XMLHttpRequest를 통해 서버에 요청을 보내 서버에서 JSON 형식의 제품 데이터를 얻습니다. PHP는 MySQL을 사용하여 데이터베이스에서 제품 데이터를 쿼리하고 이를 JSON 형식으로 인코딩합니다. JavaScript는 JSON 데이터를 구문 분석하여 페이지 컨테이너에 표시합니다. 버튼을 클릭하면 제품 목록을 로드하라는 Ajax 요청이 트리거됩니다.
