Ajax与mysql数据交互实现留言板功能的步骤

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> 
  <div id="box"> 
   <div id="head"> 
    留言板 
   </div> 
   <div id="fill_in"> 
    <textarea id="content"></textarea> 
    <button id="btn">提交留言</button> 
   </div> 
   <!--留言列表--> 
   <div id="message_text"> 
    <ul class="list"> 
    </ul> 
   </div> 
   <!--分页--> 
   <div id="page"> 
    <a href="javasript:void(0)">1</a> 
    <a href="javasript:void(0)">2</a> 
   </div> 
  </div> 
 </body> 
 <script src="Jq/jquery-3.1.1.min.js"></script> 
 <script type="text/javascript"> 
  $(function(){ 
   $("#btn").on("click",function(){ 
    if ($("#content").val() == "") { 
     alert("~~客官,说一句再走呗~~