实现的原理其实很简单，我是用的原生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
时间： 2024-10-11 01:31:47