php结合ajax实现简单的无刷新评论

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了php结合ajax实现简单的无刷新评论相关的知识,希望对你有一定的参考价值。

技术分享

实现的原理其实很简单,我是用的原生js写的,当然用jq封转好的也都一样(下次用jq写个其他的)。解析都写在代码里面了:

建表语句:

技术分享
1 CREATE TABLE `comment` (
2 `id`  int NOT NULL AUTO_INCREMENT COMMENT 主键索引 ,
3 `content`  text NOT NULL COMMENT 评论内容 ,
4 PRIMARY KEY (`id`)
5 )ENGINE=MYISAM DEFAULT CHARSET=UTF8
6 ;
comment.sql
技术分享
 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>秋田嘉-简单的Ajax无刷新评论</title>
 9 </head>
10 <body>
11 <form onsubmit="return false;">
12     <textarea placeholder="扯淡、吐槽、表扬、鼓励.......想说啥就说啥" id="comment" name="comment" style="width: 400px;height:80px;"></textarea>
13     <span id="msg" style="color: red;"></span>
14     <p><button id="button">发表评论</button></p>
15 </form>
16     <pan id="msg2"></pan>
17 <h2>
18     评论列表:
19 </h2>
20 <div id="list">
21 <?php
22     // 以下是用mysqli操作数据库,不了解的话请移步到我的《mysqli操作数据库》这篇博文
23     $mysqli = new Mysqli(‘localhost‘,‘root‘,‘admin‘,‘comment‘);
24     $sql = "SELECT `content` FROM `comment`";
25     $res = $mysqli->query($sql);
26     if ($res){
27         while($result = $res->fetch_array()){
28             echo ‘<p style="微软雅黑">‘.$result[‘content‘].‘</p><hr/>‘;
29         }
30     }
31     $res->free();
32     $mysqli->close();
33 ?>
34 </div>
35 
36     <script type="text/javascript">
37         var xhr;
38         if (window.XMLHttpRequest){                     // 根据不同的浏览器版本,实例化XMLHttpRequest对象,用于发送http请求。
39             xhr = new XMLHttpRequest();                 // 主流浏览器
40         }else {
41             xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘); //IE5.5(laji)
42         }
43                                                         // 查找相应的节点元素,偷个懒都用ById
44         var oTex = document.getElementById(‘comment‘);  // 输入框
45         var oBut = document.getElementById(‘button‘);   // 按钮
46         var oMsg = document.getElementById(‘msg‘);      // 提示信息
47         var oList = document.getElementById(‘list‘);    // 评论列表
48 
49         oBut.onclick = function () {                    // 监视发表评论按钮点击事件
50             if (oTex.value === ‘‘){                     // 简单的判断
51                 oMsg.style.color = ‘red‘;
52                 oMsg.innerText = ‘请填写评论后在发表‘;
53                 return false;
54             }
55             xhr.open(‘post‘,‘comment.php‘);             // 发送请求,第一个参数使用post方式,第二个参数是请求地址,第三个参数是否异步发送,(布尔型)默认true
56             xhr.setRequestHeader(‘Content-type‘,‘application/x-www-form-urlencoded‘);// 设置post发送头信息。如果方式的get则不需要。
57             var data = "comment="+oTex.value;           // 设置发送参数值。接收的时候就是这样: $_POST[‘comment‘]; 如果是get发送方式,请直接在xhr.open()中把值拼接到请求地址url中。xhr.send()时不需要带参数。
58             xhr.send(data);                             // 发送。请求方式是get时,不用传个参数、
59             xhr.onreadystatechange = function () {      // 监视状态
60                 if (xhr.readyState == 4 && xhr.status == 200){  // ①获得xhr对象的状态:0 1 2 3 4(4表示请求已完成,直接判断即可。其它的状态描述详情:见之后博文)②服务器状态 404 500 200(这个大家应该都懂)
61                     if (xhr.responseText){              // 在comment.php中我用的是输入数据库受影响的记录,当你成功插入一条数据后,返回1,所以这里直接做个判断了。(这次用的是TEXT接收数据,算是偷个懒,下次用个数组或json接收,高端正规些)
62                         oMsg.innerText = ‘评论发表成功‘;
63                         oMsg.style.color = ‘#5194d2‘;
64                         var oP = document.createElement(‘p‘);   // 添加节点,用于让用户即时看到自己的评论。
65                         var oHr = document.createElement(‘hr‘); // 同上
66                         oP.innerText = oTex.value;              // 赋值
67                         oList.appendChild(oP);                  // 追加节点。(没做评论倒叙查看。下次下次)
68                         oList.appendChild(oHr);                 // 同上
69                         oTex.value = ‘‘;                        // 初始化下值。
70                     }else{
71                         oMsg.innerText = ‘评论发表失败‘;
72                         oMsg.innerText.style.color = ‘red‘;
73                         return false;
74                     }
75                 }
76             }
77         }
78 
79     </script>
80 </body>
81 </html>
index.php
技术分享
 1 <?php
 2     if (!isset ($_POST[‘comment‘])){
 3         header( "Location:./index.php");
 4     }
 5     $mysqli = new Mysqli(‘localhost‘,‘root‘,‘admin‘,‘comment‘);
 6     $content = addslashes(htmlspecialchars($_POST[‘comment‘]));
 7     $sql = "INSERT INTO `comment` (`content`) VALUES (‘$content‘)";
 8     $res = $mysqli->query($sql);
 9     if ($res){
10         echo $mysqli->affected_rows;
11     }
12     $mysqli->close();
13 ?>
comment.php

以上是关于php结合ajax实现简单的无刷新评论的主要内容,如果未能解决你的问题,请参考以下文章

Django使用Ajax实现页面无刷新评论回复功能

使用Ajax在PHP中发表评论

php的无刷新实现方法

php+JQuery+Ajax简单实现页面异步刷新

用ajax实现评论刷新

php+JQuery+Ajax简单实现页面异步刷新