首页 > 代码库 > php结合ajax实现简单的无刷新评论
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=UTF86 ;
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 <?php22 // 以下是用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 // 查找相应的节点元素，偷个懒都用ById44 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 =http://www.mamicode.com/== ‘‘){ // 简单的判断51 oMsg.style.color = ‘red‘;52 oMsg.innerText = ‘请填写评论后在发表‘;53 return false;54 }55 xhr.open(‘post‘,‘comment.php‘); // 发送请求，第一个参数使用post方式，第二个参数是请求地址，第三个参数是否异步发送，（布尔型）默认true56 xhr.setRequestHeader(‘Content-type‘,‘application/x-www-form-urlencoded‘);// 设置post发送头信息。如果方式的get则不需要。57 var data = "http://www.mamicode.com/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 = http://www.mamicode.com/‘‘; // 初始化下值。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实现简单的无刷新评论
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。