• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1/a> 
            a href="javasript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2/a> 
          /div> 
        /div> 
      /body> 
      script src="Jq/jquery-3.1.1.min.js"> 
    /html> 
    

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

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

    这部分是php代码部分:

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

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

    include_once "comment.php"; 
    

    这一行是引用其他代码

    ?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 "comment.php"; 
       $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; 
         
       } 
    ?>

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    您可能感兴趣的文章:
    • php+ajax制作无刷新留言板
    • 本人ajax留言板的源程序 不错的应用js
    • 找到一款不错的基于AJAX留言板源码(PHP版、ASP版)提供下载了
    • asp简单的ajax留言板(采用三层模式)
    • asp简单的ajax留言板
    上一篇:细数Ajax请求中的async:false和async:true的差异
    下一篇:ajax实现数据分页查询
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Ajax与mysql数据交互制作留言板功能(全) Ajax,与,mysql,数据,交互,制作,