快捷導(dǎo)航

Ajax與mysql數(shù)據(jù)交互實(shí)現(xiàn)留言板功能

更新時(shí)間：2016年12月22日 08:40:07 作者：sexy_squirrel

最近自己做了一個(gè)小demo，實(shí)現(xiàn)了Ajax與MySQL的數(shù)據(jù)交互，js部分用的是jq，后臺(tái)用的是PHP，數(shù)據(jù)庫(kù)是mysql，下面通過(guò)本文給大家詳細(xì)介紹下

最近自己做了一個(gè)小demo，實(shí)現(xiàn)了Ajax與MySQL的數(shù)據(jù)交互，js部分用的是jq，后臺(tái)用的是PHP，數(shù)據(jù)庫(kù)是mysql，過(guò)時(shí)間再來(lái)一個(gè)node+MongoDB版的。

關(guān)于mysql的使用和安裝，就不多講了，自行百度xampp，Apache服務(wù)器和mysql數(shù)據(jù)庫(kù)集成，非常好用

首先打開(kāi)服務(wù)器和數(shù)據(jù)庫(kù)，我這里先建立了一個(gè)“eleven”的數(shù)據(jù)庫(kù)，下面建立了一個(gè)叫做microblog的表（請(qǐng)注意：我這里使用的是高版本的mysql，里面php鏈接數(shù)據(jù)庫(kù)的方法使用的都是mysqli_ 如果版本過(guò)低，請(qǐng)使用mysql_ 方法，自行修改代碼）
以下是代碼部分：

html頁(yè)面和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> 
      <!--分頁(yè)--> 
      <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("~~客官，說(shuō)一句再走唄~~

您可能感興趣的文章: