WordPress中利用AJAX技术进行评论提交的实现示例_javascript技巧

一直对 WordPress 的 Ajax 交互研究感兴趣，也一直很关注于这方面的技术，谈到 WordPress Ajax 就不得不谈到评论 Ajax提交，作为一个博客、论坛评论的 Ajax 提交不仅可以改善用户体验，还可以大幅缩减服务器开支，毕竟输出单条评论内容比重新组织输出一个页面要简单的多。 虽说现在访问量一直比较低，不存在服务器压力的问题，但一向注重用户体验的我，当然不能放弃这么一个提升用户体验的机会。今天抽了一下午的空，把这个主题的 Ajax 评论提交初步完成了。

直接开门见山，直接上代码：（原理及思路在最后）
根据自己主题不同结构，以下代码请自行调整。

WordPress Ajax 提交评论 PHP 代码
在主题 function.php 文件中加入如下部分。

//以下大部分代码出自 yinheli 经由该部分代码，排除部分错误、优化精简得出以下代码。
//yinheli博客不做了，所以这里就不给链接了。
//Edited by XiangZi DEC.17TH 2011
function fail($s) {//虚拟错误头部分
  header('HTTP/1.0 500 Internal Server Error');
  echo $s;
  exit;
}
function ajax_post_comment_slow (){
 fail('用不用说这么快？想好了再说！');
}
//评论太快输出代码。
add_filter('comment_flood_trigger','ajax_post_comment_slow', 0);
//挂一个评论太快，返回内容的钩子
function ajax_comment(){
// Ajax php 响应部分代码
if($_POST['action'] == 'ajax_comment') {
  global $wpdb, $db_check;
    // Check DB
    if(!$wpdb->dbh) {
      echo('Our database has issues. Try again later.');
  die();
    }
nocache_headers();
$comment_post_ID = (int) $_POST['comment_post_ID'];
 $status = $wpdb->get_row("SELECT post_status, comment_status FROM $wpdb->posts WHERE ID = '$comment_post_ID'");
if ( empty($status->comment_status) ) {
//这一套判断貌似抄的 wp 源代码 。详见：include/comment.php
  do_action('comment_id_not_found', $comment_post_ID);
  fail('The post you are trying to comment on does not currently exist in the database.');
} elseif ( 'closed' == $status->comment_status ) {
  do_action('comment_closed', $comment_post_ID);;
  fail('Sorry, comments are closed for this item.');
} elseif ( in_array($status->post_status, array('draft', 'pending') ) ) {
  do_action('comment_on_draft', $comment_post_ID);
  fail('The post you are trying to comment on has not been published.');
}
$comment_author    = trim(strip_tags($_POST['author']));
$comment_author_email = trim($_POST['email']);
$comment_author_url  = trim($_POST['url']);
$comment_content   = trim($_POST['comment']);
// If the user is logged in
$user = wp_get_current_user();
if ( $user->ID ) {
  $comment_author    = $wpdb->escape($user->display_name);
  $comment_author_email = $wpdb->escape($user->user_email);
  $comment_author_url  = $wpdb->escape($user->user_url);
  if ( current_user_can('unfiltered_html') ) {
    if ( wp_create_nonce('unfiltered-html-comment_' . $comment_post_ID) != $_POST['_wp_unfiltered_html_comment'] ) {
      kses_remove_filters(); // start with a clean slate
      kses_init_filters(); // set up the filters
    }
  }
} else {
  if ( get_option('comment_registration') )
    fail('火星人？注册个?');
}
$comment_type = '';
if ( get_option('require_name_email') && !$user->ID ) {
  if ( 6> strlen($comment_author_email) || '' == $comment_author )
    fail('Oopps,名字[Name]或邮箱[email]不对。');
  elseif ( !is_email($comment_author_email))
    fail('Oopps,邮箱地址[Email]不对。');
}
if ( '' == $comment_content )
  fail('是不是应该写点什么再提交？');
// Simple duplicate check
$dupe = "SELECT comment_ID FROM $wpdb->comments WHERE comment_post_ID = '$comment_post_ID' AND ( comment_author = '$comment_author' ";
if ( $comment_author_email ) $dupe .= "OR comment_author_email = '$comment_author_email' ";
$dupe .= ") AND comment_content = '$comment_content' LIMIT 1";
if ( $wpdb->get_var($dupe) ) {
  fail('评论重复了!有木有!');
}
$commentdata = compact('comment_post_ID', 'comment_author', 'comment_author_email', 'comment_author_url', 'comment_content', 'comment_type', 'user_ID');
if( !$user->ID ){
 $result_set = $wpdb->get_results("SELECT display_name, user_email FROM $wpdb->users WHERE display_name = '" . $comment_author . "' OR user_email = '" . $comment_author_email . "'");
 if ($result_set) {
 if ($result_set[0]->display_name == $comment_author){
 fail('博主你也敢冒充？');
 } else {
 fail('博主你也敢冒充？');
 }
 }
}
$comment_id = wp_new_comment( $commentdata );
$comment = get_comment($comment_id);

if( !$user->ID ){
 setcookie('comment_author_' . COOKIEHASH, $comment->comment_author, time() + 30000000, COOKIEPATH, COOKIE_DOMAIN);
 setcookie('comment_author_email_' . COOKIEHASH, $comment->comment_author_email, time() + 30000000, COOKIEPATH, COOKIE_DOMAIN);
 setcookie('comment_author_url_' . COOKIEHASH, clean_url($comment->comment_author_url), time() + 30000000, COOKIEPATH, COOKIE_DOMAIN);
}
@header('Content-type: ' . get_option('html_type') . '; charset=' . get_option('blog_charset'));
 xz_comment($comment, null);//这是我的调用评论函数，换成你的函数名。
 die();
}
}
add_action('init', 'ajax_comment');

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 评论插件，
一些高手也只能在优化自己博客之余，把思路和部分通用核心代码做一下公布，
所以想要实现一些炫酷的功能要不有高人帮你，
要不你就只能好好学代码，期待有一日能够厚积薄发了。
效果请自行提交评论验证。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索ajax
， wordpress
评论
wordpress示例页面、javascript脚本示例、javascript示例、javascript代码示例、javascript示例解析，以便于您获取更多的相关知识。

时间： 2024-09-19 08:18:25

WordPress中利用AJAX技术进行评论提交的实现示例_javascript技巧的相关文章

WordPress中利用AJAX异步获取评论用户头像的方法_javascript技巧

在评论者输入邮箱后,异步获得评论者的头像并显示出来,个人感觉这个功能虽不能给用户体验带来多大的提升,也不算是一个实用的功能,但至少很炫,看到有的网站有添加这个功能,我也不甘寂寞所以也写了个脚本,没有时间做封装,所以直接上原理和代码. 异步动态调用头像原理 获得用户输入 过滤用户输入 传递变量到后台 后台处理数据,并返回头像的HTML代码 获得后台返回数据,将HTML代码加载到当前页面 貌似很多步骤,其实很简单,我们只要将自己的主题稍作修改就可以到达效果. 简单功能截图: 实现 功能代码:Java

js中的数组Array定义与sort方法使用示例_javascript技巧

Array数组相当于java中的ArrayList 定义方法: 1:使用new Array(5 )创建数组 var ary = new Array(5): 2:使用Json语法,var ary = [1,3,4]: 数组排序: 例: 复制代码 代码如下: function sort(){ var ary=[11,12,3,5,29]; ary.sort();//按照字符编码排序11,12,29,3,5; alert(ary.toString()); ary.sort(function(v1,v2

JS中三目运算符和if else的区别分析与示例_javascript技巧

今天写了一个图片轮播的小demo,用到了判断 先试了一下if else,代码如下:   复制代码 代码如下: if(n >= count-1){ n =0; }else{ n ++; } 随后代码写完了,准备优化一下代码,将此段改成了三目运算符的写法   复制代码 代码如下: n = n >= (count-1) ? n=0 : n++ 结果完全不同 随后研究了一下这两者的区别,总结为一句话:三目运算有返回值,if else没有返回值 做了如下测试:   复制代码 代码如下: var n=1;

JS中window.open全屏命令解析及使用示例_javascript技巧

一.代码示例 复制代码 代码如下: window.open(url,'新窗口','width='+(window.screen.availWidth-10)+',height='+(window.screen.availHeight-30)+',top=0,left=0,resizable=yes,status=yes,menubar=no,scrollbars=yes'); 二.命令解析 window.open 弹出新窗口的命令 page.html 弹出窗口的文件名 newwindow 弹出窗

javascript中setTimeout和setInterval的unref()和ref()用法示例_javascript技巧

unref()和ref()用法非常的简单,就是取消和回复setTimeout和setInterval函數的調用的. 代码如下: 复制代码 代码如下:  var testFunction=function(){      console.log("guoyansi");  }  var timer=setInterval(testFunction,1000);  timer.unref();//取消setTimeout和setInterval函數的調用  timer.ref();//恢復

在PHP中利用XML技术构造远程服务(转)

xml|远程服务 在PHP中利用XML技术构造远程服务 未来的Web将是以服务为中心的Web,XML_RPC标准使得编写和应用服务变得非常简单.本文介绍XML_RPC标准及其PHP实现,并通过实例示范了如何在PHP中开发XML_RPC服务和客户程序. 一.服务式Web 从内容提供商所采用的简单方法到UDDI(Universal Description,Discovery and Integration)的未来构想,业界已经有大量关于"服务式Web"的说明和评论.就Web的初创阶段来说,

在主页中利用ASP技术实现用户口令的验证

在主页中利用ASP技术实现用户口令的验证 ---- 大家知道在一般的WEB 站点中,用户的访问是不受限制的,即可以访问WEB 站点上的任何信息,且访问信息的次序是不受限制的. 以http://www.xyz.com为例,用户可以访问 http://www.xyz.com,可以访问http://www.xyz.com/custom.htm.这两页访问的次序没有限制,即可以先访问http://www.xyz.com/custom.htm,也可以先访问 http://www.xyx.com. 这种灵活

联想搜索-myeclipse10中使用AJAX技术需要配置些什么？

问题描述 myeclipse10中使用AJAX技术需要配置些什么? 各位前辈好,新人刚接触有关只是,如题,我尝试建立一个web项目然后导入ajax包,然后按照书上的例子进行尝试,结果html页面出现后,输入一些字,却无法实现联想搜索的目的,代码检查过没有问题,请问各位前辈该怎么解决 解决方案 你可以学习一下jquery,它封装了ajax而且学习很简单,可以上网查询教程. 解决方案二: ajax有原生的js的实现,也有框架的实现方式如jQuery,前者不需要额外的东西,后者是对前者的封装,需要jq

java-Java中利用jawin技术调用第三方dll文件，其中 invoke的参数问题 ，高手请进

问题描述 Java中利用jawin技术调用第三方dll文件,其中 invoke的参数问题 ,高手请进 各位大神: dll中的被调用方法如下: long WINAPI AutoOpenComPort(long* Port, unsigned char *ComAdr, unsigned char Baud,long *FrmHandle); 其中: Port:输出变量, ComAdr:输入/输出变量 Baud:输入变量 FrmHandle:输出变量 请问它的 msgBox.invoke(instr