jquery+tp3实现评论的页面无刷新展示
需求图解:
html代码:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *>div>ul>li{ list-style: none; border: 1px solid red; width: 200px; height: 50px; } .men{ border: 1px solid red; width: 300px; height: 100px; margin-top: 10px; border-radius: 5px; } </style> </head> <body> <textarea name="lan" id="lan" cols="30" rows="10"></textarea> <button id="sub">发表</button> <foreach name="list" item="v"> <div class="{$v.id} men"> <p>{$v.add_user} {$v.add_time|date="Y-m-d H:i:s",###} <a href="javascript:void(0);">删除</a></p> <p>{$v.content}</p> </div> </foreach> <script src="__PUBLIC__/js/jquery.js"></script> <script> $("#sub").click(function () { var lan = $("#lan").val(); if(lan.length==0){ alert('内容不能为空'); return false; } //请求提交 $.post("__URL__/lansub", { content:lan }, function (data) { if(data==2){ alert('发表失败'); return false; }else{ alert('发表成功'); var arr = JSON.parse(data); // console.log(arr); //然后进行div的填充 $("div:first").before("<div class='"+arr.id+" men'><p>"+arr.add_user+arr.add_time+"<a href='javascript:void(0);'>删除</a></p><p>"+arr.content+"</p></div>"); } }); }); </script> </body> </html>
php代码:
//留言页面 public function GetLan(){ $res = M("comment")->order('id desc')->select(); $this->assign('list',$res); $this->display(); } //提交留言 public function lansub(){ $data['content'] = I('post.content'); $data['add_time'] = time(); $data['add_user'] = '张三'; if($id = M("comment")->add($data)){ //把最新添加的数据返回给前台 $arr['id'] = $id; $arr['content'] = $data['content']; $arr['add_time'] = date("Y-m-d H:i:s",$data['add_time']); $arr['add_user'] = $data['add_user']; echo json_encode($arr); }else{ echo 2; //发表失败 } }
备注:只是提供一部分思路,少部分代码需要自己修改和完成,感谢认可!
通往牛逼的路上,在意的只有远方!