目录

前言

由于typecho相对wp来说还不够成熟,且插件不丰富,想找个评论ajax的插件,找到了一个AjaxComments的插件。

但是在启用AjaxComments之后发现各种问题。于是果断改了,把ajaxcomment缩减成一段JS实现评论ajax。

实现原理

  1. 获取评论提交事件
  2. 添加评论校验功能
  3. 使用jquery ajax提交评论form
  4. 获取返回结果,回写到页面
  5. 完善:添加评论成功、校验、评论失败等结果

核心还是调用jquery ajax,和回写页面的处理。

实现代码

通过伪代码来讲解完整步骤

//绑定评论提交事件
$(comment_form).submit(function() { 

 //disable提交按钮,防止重复提交
 $(submit_btn).attr('disabled', true).fadeTo('slow', 0.5);

 /* 评论预检,这个为作者不唯恐 */ 
 if($(comment_form).find('#author').val() == '') {
     //增加页面提示
     $msg.text(txt_1);
     msg_effect('#error'); return false;
 } 
 
 //提交载入效果..
 $('#loading').show();

//jquery ajax
 $.ajax({
   url:  $(this).attr('action'),
   type: $(this).attr('method'),
   data: $(this).serializeArray(),
   error:function(){
        //异常处理
     $msg.text('提交失败,请重试!');
     msg_effect('#error'); 
         return false;
   },

   //成功处理
   success: function(data) {
    $('#loading').slideUp();
    try {
       
        //把返回结果回写到评论页面,以下省略
    $(comment_list).prepend(data);
        ...
        ...
        ...
      
       }
    } catch (e) {
         alert('Error!\n\n' + e);
       //异常刷新页面
    window.location.reload();
    }
   } // end success()
 }); // end ajax()

//返回false,不触发按钮提交
 return false; 
});

代码下载

代码只供参考,主要是评论页面不太一致,回写页面会有所不同,需要修改为适合自己的js

此处内容需要评论回复后方可阅读。

参考

JQuery Ajax