Ajax与mysql数据交互制作留言板功能-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

Ajax与mysql数据交互制作留言板功能

May 22, 2018 pm 05:20 PM

ajax mysql buat

这篇文章主要为大家详细介绍了Ajax与mysql数据交互，实现留言板功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

最近自己做了一个小demo，实现了Ajax与MySQL的数据交互，js部分用的是jq，后台用的是php，数据库是mysql，过时间再来一个node+mongodb版的。

关于mysql的使用和安装，就不多讲了，自行百度xampp，Apache服务器和mysql数据库集成，非常好用。

首先打开服务器和数据库，我这里先建立了一个“eleven”的数据库，下面建立了一个叫做microblog的表（请注意：我这里使用的是高版本的mysql，里面php链接数据库的方法使用的都是mysqli_ 如果版本过低，请使用mysql_ 方法，自行修改代码）
以下是代码部分：

html页面和js部分：

&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
  &lt;head&gt; 
    &lt;meta charset=&quot;UTF-8&quot;&gt; 
    &lt;title&gt;微博留言板&lt;/title&gt; 
    &lt;style type=&quot;text/css&quot;&gt; 
      *{ 
        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&gt;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&gt;li&gt;.control{ 
        position: absolute; 
        bottom: 3px; 
        right: 5px; 
        font-size: 14px; 
      } 
      .list&gt;li&gt;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&gt;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; 
      } 
    &lt;/style&gt; 
  &lt;/head&gt; 
  &lt;body&gt; 
    &lt;p id=&quot;box&quot;&gt; 
      &lt;p id=&quot;head&quot;&gt; 
        留言板 
      &lt;/p&gt; 
      &lt;p id=&quot;fill_in&quot;&gt; 
        &lt;textarea id=&quot;content&quot;&gt;&lt;/textarea&gt; 
        &lt;button id=&quot;btn&quot;&gt;提交留言&lt;/button&gt; 
      &lt;/p&gt; 
      &lt;!--留言列表--&gt; 
      &lt;p id=&quot;message_text&quot;&gt; 
        &lt;ul class=&quot;list&quot;&gt; 
        &lt;/ul&gt; 
      &lt;/p&gt; 
      &lt;!--分页--&gt; 
      &lt;p id=&quot;page&quot;&gt; 
        &lt;a href=&quot;javasript:void(0)&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; &gt;1&lt;/a&gt; 
        &lt;a href=&quot;javasript:void(0)&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; &gt;2&lt;/a&gt; 
      &lt;/p&gt; 
    &lt;/p&gt; 
  &lt;/body&gt; 
  &lt;script src=&quot;Jq/jquery-3.1.1.min.js&quot;&gt; 
&lt;/html&gt;

Salin selepas log masuk

代码显示不完，下面是php部分代码。
接01部分，jq的ajax请求：

&lt;script type=&quot;text/javascript&quot;&gt; 
    $(function(){ 
      $(&quot;#btn&quot;).on(&quot;click&quot;,function(){ 
        if ($(&quot;#content&quot;).val() == &quot;&quot;) { 
          alert(&quot;~~客官，说一句再走呗~~&quot;); 
          return; 
        }  
        else{ 
          $.ajax({ 
            type:&quot;get&quot;, 
            url:&quot;http://localhost/phpStudy/ajax03/message.php&quot;, 
            async:true, 
            dataType:&quot;json&quot;, 
            data:{ 
              content:$(&quot;#content&quot;).val(), 
              act:&quot;add&quot; 
            }, 
            success:function(data){ 
//             var result = JSON.parse(data); 
              if (data.error==0) { 
                createLi(data.id,$(&quot;#content&quot;).val(),data.time); 
              } else{ 
                alert(data.msg); 
              } 
            } 
          }); 
        } 
         
      }); 
       
      //创建节点 
      function createLi(id,content,time){ 
        var html = $(&#39;&lt;li&gt;&lt;p&gt;&#39;+content+&#39;&lt;/p&gt;&lt;p class=&quot;control&quot;&gt;&lt;span&gt;时间：&#39;+time+&#39;&lt;/span&gt;顶：&lt;em&gt;0&lt;/em&gt;踩：&lt;em&gt;0&lt;/em&gt;&lt;a class=&quot;remove&quot; href=&quot;javasript:void(0)&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; &gt;删除&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;&#39;); 
          $(&quot;.list&quot;).prepend(html); 
          var h = html.height(); 
          html.height(0); 
          html.stop().animate({ 
            height:h 
          },300); 
          //删除 
          html.find(&quot;.remove&quot;).on(&quot;click&quot;,function(){ 
            html.stop().animate({ 
              height:0 
            },300,function(){ 
              html.remove(); 
            }) 
          }); 
      } 
    }) 
  &lt;/script&gt;

Salin selepas log masuk

这部分是php代码部分：

&lt;?php 
  header(&quot;Content-type:text/html;charset=utf8&quot;); 
   date_default_timezone_set(&quot;PRC&quot;); 
   //链接数据库 
   $link = mysqli_connect(&quot;localhost&quot;, &quot;root&quot;, &quot;&quot;, &quot;eleven&quot;); 
   //设置数据库编码格式 
   mysqli_query($link, &quot;set names utf8&quot;); 
?&gt;

Salin selepas log masuk

注意：这部分我写成了公共代码，因为我在学习做其他东西时调用了，所以下面的代码会有

include_once &quot;comment.php&quot;;

Salin selepas log masuk

这一行是引用其他代码

<?php 
  /* 
   * 开发文档 
   * 1.用于提交的留言留言进行存储 
   * url：http://localhost/phpStudy/ajax03/message.php 
   * 提交方式：get 
   * 提交参数说明： 
   * content 必须 留言板内容 
   * act 必须 借口标识 
   * 返回参数说明 
   * 成功：{"error":"0","id":1,"time":"2016-11-30"} 
   * 失败：{"error":1,"msg":"留言失败，请重试"} 
   * 
   * 2.up 
   * id 必须 留言的id编号 
   * act 必须 接口标识 up 
   * 返回声明 
   * 成功：{"error":"0"} 
   * 失败：{"error":"1","msg":"点赞失败"} 
   * 
   * 3.分页（获取页码的接口）； 
   * act 必须 接口标识 count 
   * 返回参数说明： 
   * 成功：{"error":"0","countPage":"3"}; 
   * 失败：{"error":"1","msg":"请求数据失败，请重试！"} 
   * 
   * 4.分页（点击页码跳转） 
   * url：http://localhost/phpStudy/ajax03/message.php 
   * 提交方式：get 
   * 提交参数说明： 
   * starPage 必须参数 页码索引值 
   * act 必须 接口标识 page 
   * 返回参数说明 
   * 成功：{"error":"0","data":[{},{},{},{},{}]} 
   * 失败：{"error":"1","msg":"数据查询失败，请重试！"} 
   * 
   */ 
   include_once &quot;comment.php&quot;; 
   $act = $_GET["act"];//接口请求标识 
   switch ($act) { 
    case 'add'://提交留言 
      $content = $_GET["content"]; 
      $time = time(); 
      $times = date("Y-m-d H:i:s",$time); 
      $query = "INSERT INTO microblog(id,content,time) VALUES(null,'{$content}','{$times}')"; 
      mysqli_query($link,$query); 
      $insertId = mysqli_insert_id($link); 
      if($insertId>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; 
     
   } 
?>

Salin selepas log masuk

上面是我整理给大家的，希望今后会对大家有帮助。

ajax响应json字符串和json数组的实例（图文教程）

Ajax同步和异步问题浅析及解决方法

Ajax解决多余刷新的两种方法

Atas ialah kandungan terperinci Ajax与mysql数据交互制作留言板功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

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