标签/Tag为[jQuery]的文章

闲暇无聊，简单的把原来BBS的的编辑器进行了闭包处理。和原来的功能没有啥区别，仅仅视简单的 UBB支持和ajax 上传。 纯粹算是 茴 字的 N 种写法。

记录下来，以免忘记，其中 editer 的 ID 为 document.FORM.inpost

代码如下：

就像本站的本地评论一样。 虽然，本地评论我修改了后台程序，一样存储了评论者 Useragent 。但是除非 JS 方式显示。 不然默认是不会显示的。

原因很简单。 本站解析 UA 是用的这个JS库，而非后台的 Perl 程序。 而本站的本地评论现在显示是动静结合的。 简单的说，每篇文章都是一个静态的HTML页面，定期更新评论在这个页面上。同时JS载入评论，进行判断是否写入静态页面并动态更新之。 显然静态页面解析不可能对 Useragent 字符串进行处理。 而路杨并不像完全对静态评论进行JS替换。。 复杂的的办法就是在后台用 Perl 再写一个解析 UA 的程序出来作为静态HTML的 UA 解析输出。但是 UA 的构造太杂乱了。。。。

今天想了想，其实很简单，还是前段解决吧。 一个 JQ each搞定。 代码如下：

code$("span[rel='ua']").each(function(){
if ( $(this).hasClass("done") ) return;
var $el = $(this).closest(".comment");
var _id= $el.attr("data-comment-id");
$(this).replaceWith(tt.show_ua_by_id(_id))
// $(this).html( tt.show_ua_by_id(_id) ).addClass("done").removeAttr("rel");
});

tt.show_ua_by_id() 代码片段如下：

codeshow_ua_by_id: function(idx){
var s = json_data.comments[idx];
if (!s) return '';
if (s.agent) return tt.show_ua(s.agent);
return '';
},

而静态网页在要显示 UA 的位置加入 <span rel="ua"></span> 就一切OK了。

上面的 JS 都是片段， 完整可以查看本站 评论JS：http://static.easunlee.cn/js/new_mt_comments.js。

记录下来，给自己备忘。

This is a sitelog of Easun.org.

因为 本地评论 JS 化，又重写了一遍 MT 的 ajax 提交过程。梳理了一下流程。

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

简单的说，就是设置全局变量 user 为 null，然后重新在 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 ，简单完成效果如下：

为了配合 CDN 前台。 后台的域名改成了 mt.easun.org/cgi-bin。 之所以启用子域而不是独立域名，是因为同域不同子域间可以天然共享 cookie ，而MT的POST必须带有 cookie ，不然登录信息验证不过。

测试一下正常的POST，没有任何问题。cookie 由于 CookieDomain 为 .easun.org ，所以cookie信息正常传递给了 mt.easun.org 后台。

但是接下来用 JQ $.post 进行 AJAX POST 的时候，就出现跨域问题了。 如果是Get，很简单，可以参考我上篇（ [JQ+Perl]JQ AJAX跨域请求HTML/JS页面内容总结 ）解决之。 POST 就必须设置跨域请求了。

不想回归 iframe 。幸好服务器部分配置可以自己控制。在后台脚本目录建立 .htaccess,内容如下：

code<IfModule mod_headers.c>
Header set Access-Control-Allow-Credentials: true
Header set Access-Control-Allow-Origin "http://easun.org"
</IfModule>

这下应该可以 $.post 了吧？

但是结果依然很悲哀，这次 POST 成功， 但是 JQ 并不传递 Cookie。导致身份认证出错。 Google之。发现跨域（包括子域）， 如果要传递Cookie， JQ AJAX 还需要手动发送认证凭证，设置 withCredentials ，这样才会传递 Cookie.

根据这些信息。 重写 $.post 为 $.ajax 模式，代码如下：

code$.ajax({
type: 'POST',
cache:false,
url: url,
data: $("#comments-form").serialize(),
success: function(data){
if (f.preview.value =='1' ) { EasunisPreReturn(data);}
else {EasunisPostReturn(JSON.parse(data));}
},
xhrFields: { withCredentials: true },
});
return false;

调试之，一切OK。

参考资料：

1.【前端笔记】使用ajax跨域withCredentials的作用

后记：

对于IE8，9 来说。JQ AJAX 跨子域Post 即使设置了上述也会失败。原因很奇葩，跨域提交需要使用 XDomainRequest 对象。

幸好有 JQ 插件 jQuery-ajaxTransport-XDomainRequest 可以解决。 在 $.ajax 前引入：

code<!--[if lte IE 9]>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.3/jquery.xdomainrequest.min.js"></script>
<![endif]-->

同时，为了兼容出错信息，当$.ajax 失败的时候，设定正常方式POST。虽然这样界面乱了，但是保证功能正常。

codeerror: function(){ f.submit(); }

路杨有2个域名，easun.org easunlee.org 统统指向同一个地址。
而小站的 blog 主页 的分页获取是通过 jQuery 的AJAX完成的。 见抓图。

核心代码为自写。如下：

codefunction ajax_get (url, mode,callback)
{
var sdiv = $("#search-results");
if (!sdiv) return true;
$.ajax({
url:url,
data: {'format':'js'},
success: function(data){
if ( data.error == null ){
if (mode == 'append') sdiv.append(data.result.content);
else sdiv.html(data.result.content);
if (data.result.next_url) { next_url = data.result.next_url; }
else { $('#show-more').hide(); }
return false;
}else { location.href = url;return true;}
},
error:function(req, status, obj){ location.href = url; return true;},
beforeSend: function(xh){ /*do sth before send*/ },
complete: function(xh){ /*do sth for complete*/ } ,
});
}

其中url 为本站后台地址，大致为：
http://easun.org/{path-to-mt}/mt-search.cgi?IncludeBlogs=2&archive_type=Index&template_id={main_index_tmp_id}&page={num}

加上format=js参数则为JSON结构， 返回的数据大致为

code{"error":null,"result":{"next_url":"下一页的地址","content":"本页展示数据"}}

如果出错，则在本页面打开没有 format=js 参数的完整 HTML 版本。

但是，这个脚本还是有问题的。

如果以域名 http://easun.org/blog/ 访问，则毫无问题, 一旦用 http://easunlee.org/blog/ 则基本上不能完成。 不用说后期路杨打算给后台设置不同的子域名。
原因很简单： ajax 不能跨域。（当然某些BT 的 ie 版本正常跨域，汗。）

有没有办法解决这个问题呢？

研究了一番，发现使用 jQuery 的 JSONP 方式即可完成。
即让后台返回的数据为

codemycallback( {"error":null,"result":{"next_url":"下一页的地址","content":"本页展示数据"}} );

当然需要修改核心代码，让 $.ajax 工作在 JSONP 下:

codefunction ajax_get (url, mode,callback)
{
var sdiv = $("#search-results");
if (!sdiv) return true;
$.ajax({
url:url,
data: {'format':'js'},
dataType: "jsonp", /*定义dataType*/
jsonpCallback:"mycallback", /*定义jsop 回调函数*/
success: function(data){
if ( data.error == null ){
if (mode == 'append') sdiv.append(data.result.content);
else sdiv.html(data.result.content);
if (data.result.next_url) { next_url = data.result.next_url; }
else { $('#show-more').hide(); }
return false;
}else { location.href = url;return true;}
},
error:function(req, status, obj){ location.href = url; return true;},
beforeSend: function(xh){ /*do sth before send*/ },
complete: function(xh){ /*do sth for complete*/ } ,
});
}

不用担心返回的 JSONP 数据在 success: function(data) 中无法解析，只要定义了
dataType: "jsonp",jsonpCallback:"mycallback", 则 success: function(data)中的 data 自动为 JSONP 中包含的 JSON数据。 而不是 JSONP 数据串。
现在的问题，是后台的 mt-search.cgi 不具备输出 JSONP 格式的能力， format=js 只能输出 JSON 格式，这个时候如果不想修改 mt 代码。则只能通过自己写的脚本(Perl)来中转了。

曾经，本站在MT3时代，曾经写过以AJAX提交评论预览 的帖子。

那个也是通过修改模板+自写js实现，没有对MT的源代码进行任何修改，绿色无污染，不影响升级。

后来，通过自己摸索，也实现了 ajax 方式提交评论。但是一直都没有写出教程，今天有点时间。特意写出分享之。

具体效果见本站评论提交（预览和发表）。

言归正传，要实现 ajax 方式首先要定义一系列 js 函数。 由于 本站已经迁移到了 JQuery 平台，所以在改写 mt.js 需要先加入 JQ 支持，即加入：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

This is a SiteLog for Easun.org。

这也是3年以来第一次改版。 目标很单纯， 抛弃 XHTML ，改投 HTML5。

耗时一周，代码基本上都是自己在改。 网站结构全部重构，但是尽量通过 CSS 让大家感觉不出来界面有大的调整 ：）

主要改动如下：

1. 结构重写，CSS也全部推翻重写。 用 HTML5 的 header section nav article aside footer 等新标签替换掉了原模板中大量的 div 标签。让他显的有意思，并大量删除了自带模板中多重嵌套的div。这样一来大大的减少了网页的容积 ：P 评论框仿照 扶凯 大侠的网站，进行了仿写。 不过貌似在手机上lable标签有点变形～～

   ---

2. 移动优化，也就是改写了CSS，利用CSS3的特性，让页面布局可以根据不同的浏览器分辨率进行自动切换，用我的 Mate7 看了一下，结果还是差强人意：）

   ---

3. JS改写， 因为LightBox升级，jQuery 库彻底引入，自己的 ajax 提交评论以及一些自定义的JS都统统用 jQuery 库重写了。让代码更简洁。

   ---

4. QQ登录的引入， 给整个网站加入了最热门的 QQ互联 功能，也就是用QQ帐号登录评论功能。 代码以 plugin 方式运行， 也算自己的原创 MT 插件，等稍后整理出来，于同好共享之。另外，评论登录界面也做了修改，融合了 MT 4 的列表显示来代替MT 5 的select选择。更好看意见，大家可以点击 http://easun.org/cgi-bin/mt/cp?__mode=login&blog_id=2 来看看结果。

基本上的改动就是这样了。 一些东西，比如 ajax 提交评论、后台的的防止 SPAM 的SimpleComment 0.12 等自己折腾的东西，等有时间会写成博文，方便大家也方便自己：）

本站的图片显示一直使用 LightBox，
最近升级，才发现 LightBox悄悄迁移到了 jQuery 平台。
笑ing， jQuery 貌似越来越份额多了。

想到既然是要导入 jQuery ，干脆把自己的一些 js 也用 jQuery 重写一下，尤其是 ajax 方式提交评论的代码。
于是，打开 mt.js ,看见了大量的

var f = document['comments_form'];

于是就想当然了。把原来的代码改成

$.post("http://easun.org/path/to/mt-cms.cgi",
$.param($("#comments_form").serializeArray())
).success(function(data) {
if (f.preview.value =='1' ) { EasunisPreReturn(data);}
else {EasunisPostReturn(JSON.parse(data));}
}) ;

结果运行不能正常获取返回值，百思不的其解。
最后，打开 模板的 form 部分。发现 代码如下

<form ... name="comments_form" id="comments-form" ... >

我倒～， id 根本就不对。难怪出错。
回到 mt.js 改成

$("#comments-form")

运行，一切OK。

笔记之，给自己再次修改提个醒。