WordPress中利用AJAX技术进行评论提交的实现示例_javascript技巧(2)_H5之家

Javascript 中代码注意：以下代码需要 Jquery 框架支援。 javascript onload 代码中加入以下部分。

if (jQuery('#commentform').length) { jQuery('#commentform').submit(function(){ // 截获提交动作 //ID为 commentform 的表单提交时发生的函数，也就是整个留言输入框 form 的ID。 var ajaxCommentsURL = window.location.href; jQuery.ajax({ url: ajaxCommentsURL, data: jQuery('#commentform').serialize()+'&action=ajax_comment', type: 'POST', beforeSend: function() { jQuery('#commenterror').hide(); jQuery('#commentload').fadeIn(); }, error: function(request) { //发生错误时 jQuery('#commenterror').html(request.responseText); jQuery('#commentload').hide(); //隐藏 submit jQuery('#commenterror').fadeIn(); //显示 error }, success: function(data) { jQuery('textarea').each(function(){ this.value=''; }); jQuery('#commenterror').fadeOut(); if(jQuery(".commentlist li.comment").first().length != 0){jQuery(".commentlist li.comment").first().before(data)} else {jQuery("ol.commentlist").append(data)} jQuery(".commentlist li.comment").first().hide(0,function(){$(this).slideDown(1000)}); jQuery('#cmt-submit').attr('disabled', true).css({"background-color":"#6C6C6C","color":"#E0E0E0"}); jQuery('#commentload').fadeOut(1600); setTimeout(function() { jQuery('#cmt-submit').removeAttr('disabled').css({"background-color":"#0086C5","color":"#FFFFFF"}); },3000); } }); return false; } ); }

注：代码仍有改进需求，因为没有时间，所以就没有再进化。

CSS 代码 css 随意部分添加。

#commentload,#commenterror{ display: none; margin: 5px 0 0 0; color:#D29A04; float: left; font-size:16px; padding:0 0 0 20px; } #commentload{ background: url("img/loading.gif") no-repeat bottom left ; } #commenterror{ background: url("img/error.png") no-repeat bottom left ; }

原理、思路原理： Javascript 提交数据 php响应并输出结果 Javascript 得到结果并显示思路：点击提交按钮后，Javascript 截获提交动作截获提交的各项数据（Name、Email、Web、Comment-text）利用 Javascript Jquery 模拟浏览器提交POST（Name、Email、Web、Comment-text）请求之WordPress Function.php 文件中构造一个接受请求的函数，即本列中ajax_comment函数如果请求无错误，输出正确结果如果请求有错误，输出错误结果 Javascript 获得正确结果，动态添加到评论列表中 Javascript 获得错误结果，动态添加到提交提示栏改进样式方面，我确实没什么美感，所以正在学习中。提交按钮在点击至获得返回结果后3秒的时间里应该都是变灰失效状态，这一点之前因为在本机测试，提交瞬间完成没有注意到，远程测试的时候发现了，但要改的话还要进行测试，时间太紧就不改了，有机会再改进一下。

总结因为 WordPress 主题中评论样式的自由性、多样性，所以貌似至今一直没有一款通用性的AJAX 评论插件，一些高手也只能在优化自己博客之余，把思路和部分通用核心代码做一下公布，所以想要实现一些炫酷的功能要不有高人帮你，要不你就只能好好学代码，期待有一日能够厚积薄发了。效果请自行提交评论验证。

上一篇：基于JavaScript实现div层跟随滚动条滑动_javascript技巧

下一篇：WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现_javascript技巧