Ajax与mysql数据交互实现留言板功能
最近自己做了一个小demo，实现了Ajax与MySQL的数据交互，js部分用的是jq，后台用的是PHP，数据库是mysql，过时间再来一个node+MongoDB版的。
关于mysql的使用和安装，就不多讲了，自行百度xampp，Apache服务器和mysql数据库集成，非常好用
首先打开服务器和数据库，我这里先建立了一个“eleven”的数据库，下面建立了一个叫做microblog的表（请注意：我这里使用的是高版本的mysql，里面php链接数据库的方法使用的都是mysqli_ 如果版本过低，请使用mysql_方法，自行修改代码）
以下是代码部分：
html页面和js部分：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>微博留言板</title>
<styletype="text/css">
*{
margin:0;
padding:0;
}
#box{
width:600px;
/*height:500px;*/
border:2pxsolidrgb(85,85,85);
border-radius:15px;
margin:50pxauto;
padding:20px10px15px;
background-color:rgb(85,85,85);
}
#content{
display:block;
resize:none;
width:550px;
height:200px;
margin:0auto;
border:2pxsolidrgb(225,225,225);
border-radius:10px;
text-align:center;
font-size:30px;
background-color:rgb(225,225,225);
}
#content:focus{
outline:none;
border:2pxsolidrgb(225,225,225);
box-shadow:0015pxrgb(225,225,225);
}
#btn{
border:2pxsolidrgb(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:20px10px10px;
border-bottom:2pxsolidrgb(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;
}
.controlspan,.controlem{
display:inline-block;
margin-right:15px;
}
.controlem{
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:2pxsolidrgb(68,68,68);
margin-bottom:20px;
}
</style>
</head>
<body>
<divid="box">
<divid="head">
留言板
</div>
<divid="fill_in">
<textareaid="content"></textarea>
<buttonid="btn">提交留言</button>
</div>
<!--留言列表-->
<divid="message_text">
<ulclass="list">
</ul>
</div>
<!--分页-->
<divid="page">
<ahref="javasript:void(0)">1</a>
<ahref="javasript:void(0)">2</a>
</div>
</div>
</body>
<scriptsrc="Jq/jquery-3.1.1.min.js"></script>
<scripttype="text/javascript">
$(function(){
$("#btn").on("click",function(){
if($("#content").val()==""){
alert("~~客官，说一句再走呗~~