个人网站留言页面（前端jQuery编写、后台php读写(4)

点击后就是常见的防止多次提交，检查一下cookie中有没有username、email等用户信息，没有就使用游客身份，然后处理一下内容，去去掉空白啊，\n换成 <br> 等等，检验过后发起ajax请求。

成功后把新的评论放到this.lists，然后执行this.showList(1)刷新显示

php部分仍然不讲，sql语句如下：

$parent = $_GET['parent']; $belong = $_GET['belong']; $content = htmlentities($_GET['content']); $username = $_GET['username']; $email = $_GET['email']; $query = "insert into comments (parent,belong,content,time,username,email) value ($parent,$belong,'$content',NOW(),'$username','$email')"; doClickResponse 函数 fn.doClickResponse = function(_event){ var target = $(_event.target); var id = target.attr('data-id'); if (target.hasClass('response') && target.attr('data-disabled') != 'true') { //点击回复 var oDiv = document.createElement('div'); oDiv.className = 'cmt-form'; oDiv.innerHTML = '<textarea placeholder="欢迎建议，提问题，共同学习！"></textarea>' + '<button data-id="' + id + '">提交评论</button>' + '<a href="javascript:void(0);">[取消回复]</a>'; target.parent().parent().append(oDiv); oDiv = null; target.attr('data-disabled', 'true'); } else if (target.hasClass('cancel')) { //点击取消回复 var ppNode = target.parent().parent(), oRes = ppNode.find('.response').eq(0); target.parent().remove(); oRes.attr('data-disabled', ''); } else if (target.hasClass('resBtn')) { //点击评论 var oText = target.parent().find('.cmt-text').eq(0), parent = target.attr('data-id'); this.addCmt(target, oText, parent); }else{ //其他情况 return !1; } };

根据target.class来判断点击的是哪个按钮。

如果点击回复，生成html，放到这条评论的后面

var oDiv = document.createElement('div'); oDiv.className = 'cmt-form'; oDiv.innerHTML = '<textarea placeholder="欢迎建议，提问题，共同学习！"></textarea>' + '<button data-id="' + id + '">提交评论</button>' + '<a href="javascript:void(0);">[取消回复]</a>'; target.parent().parent().append(oDiv); oDiv = null; target.attr('data-disabled', 'true'); //阻止重复生成html

点击取消，就把刚才生成的remove掉

var ppNode = target.parent().parent(), oRes = ppNode.find('.response').eq(0); target.parent().remove(); oRes.attr('data-disabled', ''); //让回复按钮重新可以点击

点击提交，获取一下该获取的元素，直接调用addCmt函数

var oText = target.parent().find('.cmt-text').eq(0), parent = target.attr('data-id'); this.addCmt(target, oText, parent);

注意： parent刚才生成html时我把它存在了提交按钮的data-id上了。

到此全部功能都实现了，希望对大家的学习有所启发。

您可能感兴趣的文章: