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("~~客官，说一句再走呗~~