WordPress 启用提交评论没有页面重新加载 (使用 Ajax)？

问题描述

当用户写入注释并点击提交按钮时，WordPress 会重新加载页面，然后才能向用户显示注释。

是否有一个 Ajax-based 解决方案，允许用户动态提交问题，而不刷新整个页面？

最佳解决方案

将以下 javascrip 文件 wpse54189-ajax-comments.js 保存在 plug-in 文件夹中 – 例如 plugins/plug-in-name/js(或者如果这必须在主题文件夹中移动，您的主题) 。

/*
 * jQuery autoResize (textarea auto-resizer)
 * @copyright James Padolsey http://james.padolsey.com
 * @version 1.04
 */

(function(a){a.fn.autoResize=function(j){var b=a.extend({onResize:function(){},animate:true,animateDuration:150,animateCallback:function(){},extraSpace:20,limit:1000},j);this.filter('textarea').each(function(){var c=a(this).css({resize:'none','overflow-y':'hidden'}),k=c.height(),f=(function(){var l=['height','width','lineHeight','textDecoration','letterSpacing'],h={};a.each(l,function(d,e){h[e]=c.css(e)});return c.clone().removeAttr('id').removeAttr('name').css({position:'absolute',top:0,left:-9999}).css(h).attr('tabIndex','-1').insertBefore(c)})(),i=null,g=function(){f.height(0).val(a(this).val()).scrollTop(10000);var d=Math.max(f.scrollTop(),k)+b.extraSpace,e=a(this).add(f);if(i===d){return}i=d;if(d>=b.limit){a(this).css('overflow-y','');return}b.onResize.call(this);b.animate&&c.css('display')==='block'?e.stop().animate({height:d},b.animateDuration,b.animateCallback):e.height(d)};c.unbind('.dynSiz').bind('keyup.dynSiz',g).bind('keydown.dynSiz',g).bind('change.dynSiz',g)});return this}})(jQuery);


/*
 * Source: wp-comment-master WordPress Plugin
 * URL: http://wordpress.org/extend/plugins/wp-comment-master/
 * Author URI: http://yjlblog.com
 * Version: 1.7
 * Last Updated: 2011-6-6
 */

   var $commentlist=jQuery('.commentlist');
   var $respond=jQuery('#respond');
   var $message=jQuery('<span class="yjl-mes"></span>').appendTo("#commentform");;
   var $list=$commentlist.children();
   var totalCom=$list.length;
   var $textarea=$respond.find('#comment').attr('rows','8');

   var currentPage=0,$number,numPerPage,totalPage,$reply;

   //track a reply comment
   jQuery('.comment-reply-link').live('click',function(){
       $reply=true;
   });
   var $cancel=jQuery('#cancel-comment-reply-link').click(function(){
       $reply=false;
   });

   /*
    *if Ajax comment posting is enabled
    */
   jQuery('#commentform').submit(function(){
       jQuery.ajax({
         beforeSend:function(xhr){
            xhr.setRequestHeader("If-Modified-Since","0");
            $message.empty().append('<img src="'+yjlSettings.gifUrl+'" alt="processing...">');
         },
         type:'post',
         url:jQuery(this).attr('action'),
         data:jQuery(this).serialize(),
         dataType:'html',
         error:function(xhr){
             if(xhr.status==500){
               $message.empty().append(xhr.responseText.split('<p>')[1].split('</p>')[0]);
             }
             else if(xhr.status=='timeout'){
               $message.empty().append((yjlSettings.timeOut!=''?yjlSettings.timeOut:'Error:Server time out,try again!'));
             }
             else{
               $message.empty().append((yjlSettings.fast!=''?yjlSettings.fast:'Please slow down,you are posting to fast!'));
             }
         },
         success:function(data){
            $message.empty().append((yjlSettings.thank!=''?yjlSettings.thank:'Thank you for your comment!'));
            $newComList=jQuery(data).find('.commentlist');
            if(totalCom>0){
               if($reply)$cancel.trigger('click');
               else {
                   if(yjlSettings.order=='desc')currentPage=0;
                   else { getTotal($newComList);currentPage=totalPage-1;}
               }
               if(yjlSettings.pagination=='disable' || yjlSettings.pagerPos=='after')
                        $commentlist.prev().replaceWith($newComList.prev());
               else $commentlist.prev().prev().replaceWith($newComList.prev());
               $commentlist.replaceWith($newComList);
            }else{
               if(yjlSettings.repForm=='disable')$newComList.prev().andSelf().insertBefore($respond);
               else $newComList.prev().andSelf().insertAfter($respond);
            }
            $commentlist=$newComList;
            if(yjlSettings.pagination!='disable')pagination();
            $textarea.val('');
         }
       });//end of ajax
      return false;
   });//end of submit function

   if(yjlSettings.autoGrow!='disable'){
      $textarea.autoResize({
       // On resize:
       onResize : function() {
        jQuery(this).css({opacity:0.8});
      },
      // After resize:
      animateCallback : function() {
        jQuery(this).css({opacity:1});
      },
      // Quite slow animation:
      animateDuration : 300,
      // More extra space:
      extraSpace : 20
      });
   }

上述代码使用存储’ajax’ 加载映像位置的变量 (见下文) 。我们需要给这个变量的图像的位置，这应该是你的 plug-in 文件夹，说 plugins/plug-in-name/img(或者，如果你必须，你的主题的文件夹) 。我们将使用 wp_localise_script 。

首先，我们需要使用 WordPress 注册此脚本，将 jquery 列为依赖关系：

add_action('init','wpse54189_register_script');
function wpse54189_register_script(){
    //Register script
    wp_register_script( 'wpse54189_ajax_comment', plugin_dir_path(__FILE__ ).'js/wpse54189-ajax-comments.js',array('jquery'));

    //Add global variable storing ajax image
    wp_localize_script( 'wpse54189_ajax_comment', 'yjlSettings', array(
         'gifUrl'=> plugin_dir_path(__FILE__ ).'img/ajax-loader.gif',

         /* remove this line if you don't want the comment textbox's height
         to increase with the size of comment. */
         'autoGrow'=> 'enable'
    ));

}

然后当你想要排入文件：wp_enqueue_script('wpse54189_ajax_comment') – 这将自动打印变量，并确保 jquery 在手之前加载。

这可以放在模板文件中，或者对于 plug-ins，您可以将钩子上的脚本排成队列 (例如 comment_form_before 钩子)：

add_action('comment_form_before','wpse54189_register_script'){
     wp_enqueue_script('wpse54189_ajax_comment')
}

您可以从 here 获取一个不错的 Ajax 加载 gif 。或者简单地使用：

所有的 JavaScript 代码都是从 wp-comment-master 插件中获取的 (当然，我删除了不必要的代码片段 – 只需要保留所需的内容) 。

次佳解决方案

是的，有很多解决方案，请查看：http://wordpress.org/extend/plugins/search.php?q=ajax+comments

参考文献

Enable Submit Comment Without Page Reload (Using Ajax)?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

WordPress 启用提交评论没有页面重新加载 (使用 Ajax)？