标签/Tag为[jQuery]的文章

简单的编辑器闭包

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

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

代码如下:

[JS] 静态输出的评论也显示UA ,

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

This is a sitelog of syhtcgf.com.

因为 本地评论 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 前调用此函数了。

笔记下来,为自己提醒。

另外,本来对 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

--EOF--

[SiteLog]JQ AJAX 跨子域Post再总结 ,

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

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

但是接下来用 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://www.syhtcgf.com"
</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=http://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.3/jquery.xdomainrequest.min.js"></script>
<![endif]-->

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

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

--EOF--

[JQ+Perl]JQ AJAX跨域请求HTML/JS页面内容总结 ,

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

核心代码为自写。如下:

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://www.syhtcgf.com/{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://www.syhtcgf.com/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)来中转了。

[MT Hack]修改模板来完成MT的AJAX提交评论 ,

曾经,本站在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>

[SiteLog]网站改版和移动访问优化

This is a SiteLog for syhtcgf.com。

这也是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://www.syhtcgf.com/cgi-bin/mt/cp?__mode=login&blog_id=2 来看看结果。

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

--EOF--

[SiteLog]一则js错误寻找和 jQuery ,

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

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

var f = document['comments_form'];

于是就想当然了。把原来的代码改成
$.post("http://www.syhtcgf.com/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。

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

--EOF--