Rumah >hujung hadapan web >tutorial js >Ajax与mysql数据交互制作留言板功能
Ajax与mysql数据交互制作留言板功能
- 亚连asal
- 2018-05-22 17:20:001817semak imbas
这篇文章主要为大家详细介绍了Ajax与mysql数据交互，实现留言板功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
最近自己做了一个小demo，实现了Ajax与MySQL的数据交互，js部分用的是jq，后台用的是php，数据库是mysql，过时间再来一个node+mongodb版的。
关于mysql的使用和安装，就不多讲了，自行百度xampp，Apache服务器和mysql数据库集成，非常好用。
首先打开服务器和数据库，我这里先建立了一个“eleven”的数据库，下面建立了一个叫做microblog的表（请注意：我这里使用的是高版本的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");
?>注意：这部分我写成了公共代码，因为我在学习做其他东西时调用了，所以下面的代码会有
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;
}
?>上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Atas ialah kandungan terperinci Ajax与mysql数据交互制作留言板功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：ajax响应json字符串和json数组的实例（图文教程）Artikel seterusnya：细数Ajax请求中的async:false和async:true的差异
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional