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 ;
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>
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 ?>
以上是关于php结合ajax实现简单的无刷新评论的主要内容，如果未能解决你的问题，请参考以下文章