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

2024-10-14 17:16:23

最近自己做了一个小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; 

   }
?>

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

本人ajax留言板的源程序不错的应用js

复制代码代码如下: // JavaScript Document function $(id) { return document.getElementById(id); } function echo(obj,html) { $(obj).innerHTML=html; } function fopen(obj) { $(obj).style.display=""; } function fclose(obj) { $(obj).style.
找到一款不错的基于AJAX留言板源码(PHP版、ASP版)提供下载了

一.说明大家好,现将51AJAX的留言板源码放出,有PHP和ASP两个版本. PHP版基于AJAX+PHP4.3+MySql 4.1+Dojo 0.3,ASP版基于AJAX+ASP+Access+Dojo 0.3. 压缩包中已包含了Dojo框架的主文件dojo.js,无需再下载Dojo包: 要下载完整的Dojo框架,请点击这里下载:http://download.dojotoolkit.org/release-0.3.1/dojo-0.3.1-ajax.zip. 关于Dojo的更多信息,请点击
asp简单的ajax留言板

复制代码代码如下: <%@ codepage=65001%> <% option explicit %> <% Response.Charset="utf-8"%> <% Session.CodePage=65001 %>   &l
php+ajax制作无刷新留言板

本文就是和大家分享一款由php结合ajax实现的无刷新留言板,先给大家看一下最后的效果图: 数据库连接代码如下: <?php $conn = @mysql_connect("localhost","root","root") or die ("MySql连接错误"); mysql_select_db("demo",$conn); mysql_query("set names 'utf8'&q
asp简单的ajax留言板(采用三层模式)

好久没有写过asp了,这回写个留言板还真觉得有点难度,竞然写了整整一天,哈哈.就只有留言其它的都什么也没写,采用三层结构(不知道算不算,本来对三层的概念很糊涂) 演示www.zj55.com的留言板,希望各位大哥大姐如果发现有漏洞的话请在这里告诉我,千万不要黑我的网站,在这里小弟先谢过了. index.asp<%@ codepage=65001%><%option explicit%><% Response.Charset="utf-8"%><
Ajax与mysql数据交互制作留言板功能（全）

最近自己做了一个小demo,实现了Ajax与MySQL的数据交互,js部分用的是jq,后台用的是php,数据库是mysql,过时间再来一个node+mongodb版的. 关于mysql的使用和安装,就不多讲了,自行百度xampp,Apache服务器和mysql数据库集成,非常好用. 首先打开服务器和数据库,我这里先建立了一个"eleven"的数据库,下面建立了一个叫做microblog的表(请注意:我这里使用的是高版本的mysql,里面php链接数据库的方法使用的都是mysqli_
Ajax与mysql数据交互实现留言板功能

最近自己做了一个小demo,实现了Ajax与MySQL的数据交互,js部分用的是jq,后台用的是PHP,数据库是mysql,过时间再来一个node+MongoDB版的. 关于mysql的使用和安装,就不多讲了,自行百度xampp,Apache服务器和mysql数据库集成,非常好用首先打开服务器和数据库,我这里先建立了一个"eleven"的数据库,下面建立了一个叫做microblog的表(请注意:我这里使用的是高版本的mysql,里面php链接数据库的方法使用的都是mysqli_ 如
PHP结合Mysql数据库实现留言板功能

先给大家展示下留言板效果图: 最近看了下PHP基础语法,就想利用这些基本东西实现留言板,也是对基础知识的一个巩固. 什么是留言板?一种可以用来记录,展示文字信息的载体. 现切入正题,说说本次留言板是怎么实现! 首先用户提交留言后,相关内容存入服务器,当他想看的时候后台再把所有留言读出来,最后显示在浏览器上,用户就可以看到留言了. 这其中后台需要便于读写数据的一个工具,我选择mysql数据库来帮助我完成这些事. 我写了主要是三个php文件,分别是: conn.php 连接数据库: addmsg.p
利用“多说”制作留言板、评论系统

留言板和评论系统在网站建设中会经常用到,今天为大家介绍如何利用多说来为自己的网站制作留言板.评论系统!注意以下只是介绍一下简单的创建设置,更多功能大家可以自己去探索! 1.进入多说网站 http://duoshuo.com/ 并且登录. 2.点击首页的"我要安装",进入创建站点页面,然后根据自己的实际情况填写信息. 3.进入后台管理界面,点击工具->获取代码->通用代码,将这段代码复制到你留言板或者是评论区的地方,代码中需要你填写的信息在"文章"中设置
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例

本文实例讲述了TP5(thinkPHP5)框架基于ajax与后台数据交互操作.分享给大家供大家参考,具体如下: Ajax最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好.可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本.并且减轻服务器的负担,ajax的原则是"按需取数据",可以最大程度的减少冗余请求,和响应对服务器造成的负担. 最近在用tp5开发企业微应用,很有收获,觉得最需要注意的是thinkphp
php实现留言板功能（代码详解）

简单的PHP留言板制作做基础的留言板功能需要三张表: 员工表,留言表,好友表首先造一个登入页面: <form action="drcl.php" method="post"> <div>帐号:<input type="text" name="zhang"/></div> <div>口令:<input type="text" name=
php+Memcached实现简单留言板功能示例

本文实例讲述了php+Memcached实现简单留言板功能.分享给大家供大家参考,具体如下: MyPdo.php <?php class MyPdo{ private $pdo; function __construct() { $this->pdo = $this->getPdo(); } /** * CreatePDO * * @return PDO */ public function getPdo() { $dbms='mysql'; $dbName='testdb'; $use
基于vue和bootstrap实现简单留言板功能

本文实例为大家分享了vue实现简单留言板功能的具体代码,供大家参考,具体内容如下作为一个刚开始接触vue的前端小白,我想在这里记录一些学习过程,希望和大家一起进步,如有不妥处之处,请多多指教呦. 今天呢,是我学习vue的第二天,我想制作一个简易的留言板.功能很简单,就是数据的增删改查,下面开始步入正题: 大致布局如下: 1.html布局如果大家不想自己去写css样式,使用bootstrap框架是一个很好地选择,它提供了一套响应式.移动设备优先的流式栅格系统. <div id="app&
简单实现PHP留言板功能

本文实例为大家分享了PHP留言板功能的具体实现代码,供大家参考,具体内容如下 HTML代码 <div class="continer" > <div class="head" style="background-color:rgb(217,237,247);height:50px;vertical-align:middle"><h2 style="color: rgb(81,117,114)"&g
微信小程序实现留言板功能

本文实例为大家分享了微信小程序实现留言板功能,可以手写,可以删除,可以快速留言,供大家参考,具体内容如下 const app = getApp(); Page({ /** * 页面的初始数据 */ data: { msgData: [ { child_id: 1, msg: "泡澡水不要太热.", checked:'' },//双引号 { child_id: 2, msg: "面部比较干,想补个水.", checked: '' }, { child_id: 3, m

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

相关推荐

随机推荐