[随笔]关于 JS 和 ajax 提交评论等等

This is a sitelog of Easun.org.

因为 本地评论 JS 化,又重写了一遍 MTajax 提交过程。梳理了一下流程。

主要是删除了 MT 提交过程的 2次服务器认证,把第一次服务器认证(登录信息预提交验证) mtCommentSessionVerify 有限度地交给 JS + cookie

简单的说,就是设置全局变量 usernull,然后重新在 cookie 中读取 user 来判断登录信息是否正常? 然后其他的认证在 提交表格 时完成就好。 简单 JS 片段如下:

code var refresh_user = function(u) {
      if (u) mtSetUser(u); 
      if (!u) { user = null;  mtFireEvent('usersignin');  u = mtGetUser(); }           
      if ( u && u.is_authenticated ) { /* do nothing*/ } 
      else { $f.find(':input[name="sid"]').attr("value","") ;  ShowCommentsOpenData();  }               
  };

然后发现 JQ $.ajax 的小问题:

我的 $.ajax 如下:

code$.ajax({
     type: 'POST',
     cache:false,
     url: url,
     context: el, 
     xhrFields: { withCredentials: true  },
     data: $f.serialize(),
     success: successfuc,
     beforeSend:beforefun,
     error: errorfun,
     complete:completefuc
});

本来是吧 refresh_user 写到 beforeSend 中的,但是执行的时候发现 refresh_user 中对 $f 的改变,并没有在 data: $f.serialize() 中 体现出来。 所以只好显式在 $.ajax 前调用此函数了。

笔记下来,为自己提醒。

另外,本来对 JS 全面进行 JQ 改写来着,但是实际对 form 元素操作中发现,同样对

code<form name="comments_form" id="comments-form">
<input type="hidden" name="preview" value="" />
...
</form>

中 的 name="preview"value 操作。 原来的代码是

codevar f = document['comments_form'];
if (f.preview.value == '') f.preview.value = '1';

JQ 呢? 貌似。。。。。

codevar $f = $("#comments-form"); 
var $preview= $f.find(':input[name="preview"]');
if ($preview.attr("value") == '') $preview.attr("value","1");

f$f 是为了方便操作预先定义好的。 貌似还是不用 JQ 操作的快一点。或者就现在这样混合用吧。。。。

另外,给 ajax 提交完成后刷新新评论搞了一段简单的 JQ 特效: 代码如下:

code var animate_item = function(id) { 
     var $el =$("#comments-content .comment#comment-"+id);
     var _top = $el.offset().top - ( $(window).height() - $el.height() )/2;
     $("html,body").animate({scrollTop:_top},1000); 
     $el.addClass("notice")
         .animate({left:'30px',opacity:'0.2'},"slow")
         .animate({left:'0px',right:'30px',opacity:'0.8'},"slow")
         .animate({left:'0px',right:'0px',top:'30px',opacity:'0.2'},"slow")
         .animate({left:'0px',right:'0px',top:'0px',bottom:'30px',opacity:'0.8'},"slow")
         .animate({left:'0px',right:'0px',top:'0px',bottom:'0px',opacity:'1'},"slow");
        var total= parseInt( $("#comments").attr("data-total"));
        function c() {  $el.removeClass("notice").addClass( (total%2) ? "odd":"even" ); }
        $el.one('click',c).one('mouseover',c);
 };

没有抓 gif ,简单完成效果如下:

jq_submit_png.png