简单的编辑器闭包 程序人生
闲暇无聊,简单的把原来BBS的的编辑器进行了闭包处理。和原来的功能没有啥区别,仅仅视简单的 UBB支持和ajax 上传。 纯粹算是 茴 字的 N 种写法。
记录下来,以免忘记,其中 editer
的 ID 为 document.FORM.inpost
代码如下:
»继续阅读 "简单的编辑器闭包" 。
闲暇无聊,简单的把原来BBS的的编辑器进行了闭包处理。和原来的功能没有啥区别,仅仅视简单的 UBB支持和ajax 上传。 纯粹算是 茴 字的 N 种写法。
记录下来,以免忘记,其中 editer
的 ID 为 document.FORM.inpost
代码如下:
»继续阅读 "简单的编辑器闭包" 。
就像本站的本地评论一样。 虽然,本地评论我修改了后台程序,一样存储了评论者 Useragent
。但是除非 JS
方式显示。 不然默认是不会显示的。
原因很简单。 本站解析 UA 是用的code 而静态网页在要显示 UA 的位置加入 上面的 JS 都是片段, 完整可以查看本站 评论JS:
--EOF-- This is a sitelog of syhtcgf.com. 因为 本地评论 MT 的 ajax 提交过程。梳理了一下流程。 主要是删除了 MT 提交过程的 2次服务器认证,把第一次服务器认证(登录信息预提交验证) 简单的说,就是设置全局变量 然后发现 JQ 我的 本来是吧 笔记下来,为自己提醒。 另外,本来对 JQ 改写来着,但是实际对 中 的 而 JQ 呢? 貌似。。。。。 另外,给 ajax 提交完成后刷新新评论搞了一段简单的 JQ 特效:
代码如下: 没有抓 gif ,简单完成效果如下: --EOF-- 为了配合 CDN 前台。 后台的域名改成了 mt.www.syhtcgf.com/cgi-bin。 之所以启用子域而不是独立域名,是因为同域不同子域间可以天然共享 cookie ,而MT的POST必须带有 cookie ,不然登录信息验证不过。 测试一下正常的POST,没有任何问题。cookie 由于 CookieDomain 为 但是接下来用 JQ 不想回归 这下应该可以 但是结果依然很悲哀,这次 POST 成功, 但是 JQ 并不传递 Cookie。导致身份认证出错。
Google之。发现跨域(包括子域), 如果要传递Cookie, JQ AJAX 还需要手动发送认证凭证,设置 根据这些信息。 重写 调试之,一切OK。 参考资料: 1.【前端笔记】使用ajax跨域withCredentials的作用 后记: 对于IE8,9 来说。JQ AJAX 跨子域Post 即使设置了上述也会失败。原因很奇葩,跨域提交需要使用 幸好有 JQ 插件 jQuery-ajaxTransport-XDomainRequest 可以解决。 在 $.ajax 前引入: 同时,为了兼容出错信息,当$.ajax 失败的时候,设定正常方式POST。虽然这样界面乱了,但是保证功能正常。 --EOF-- 路杨有2个域名,www.syhtcgf.com easunlee.org 统统指向同一个地址。 其中url 为本站后台地址,大致为: 加上 如果出错,则在本页面打开没有 如果以域名 http://www.syhtcgf.com/blog/ 访问,则毫无问题, 一旦用 http://easunlee.org/blog/ 则基本上不能完成。 不用说后期路杨打算给后台设置不同的子域名。 研究了一番,发现使用 jQuery 的 JSONP 方式即可完成。 不用担心返回的 JSONP 数据在
»继续阅读 "[JQ+Perl]JQ AJAX跨域请求HTML/JS页面内容总结" 。
曾经,本站在MT3时代,曾经写过以AJAX提交评论预览 的帖子。 那个也是通过修改模板+自写js实现,没有对MT的源代码进行任何修改,绿色无污染,不影响升级。 后来,通过自己摸索,也实现了 ajax 方式提交评论。但是一直都没有写出教程,今天有点时间。特意写出分享之。 具体效果见本站评论提交(预览和发表)。 言归正传,要实现 ajax 方式首先要定义一系列 js 函数。 由于 本站已经迁移到了 JQuery 平台,所以在改写 mt.js 需要先加入 JQ 支持,即加入:
»继续阅读 "[MT Hack]修改模板来完成MT的AJAX提交评论" 。
This is a SiteLog for syhtcgf.com。 这也是3年以来第一次改版。 目标很单纯, 抛弃 XHTML ,改投 HTML5。 耗时一周,代码基本上都是自己在改。 网站结构全部重构,但是尽量通过 CSS 让大家感觉不出来界面有大的调整 :) 主要改动如下: 基本上的改动就是这样了。 一些东西,比如 ajax 提交评论、后台的的防止 SPAM 的SimpleComment 0.12 等自己折腾的东西,等有时间会写成博文,方便大家也方便自己:) --EOF-- 本站的图片显示一直使用 LightBox, 想到既然是要导入 jQuery ,干脆把自己的一些 js 也用 jQuery 重写一下,尤其是 ajax 方式提交评论的代码。 笔记之,给自己再次修改提个醒。 --EOF-- $("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()
代码片段如下:code
show_ua_by_id: function(idx){
var s = json_data.comments[idx];
if (!s) return '';
if (s.agent) return tt.show_ua(s.agent);
return '';
},
<span rel="ua"></span>
就一切OK了。Tags:
[随笔]关于 JS 和 ajax 提交评论等等
程序人生,站务记录
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(); }
};
$.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
前调用此函数了。 form
元素操作中发现,同样对code
<form name="comments_form" id="comments-form">
<input type="hidden" name="preview" value="" />
...
</form>
name="preview"
的 value
操作。
原来的代码是 code
var f = document['comments_form'];
if (f.preview.value == '') f.preview.value = '1';
code
var $f = $("#comments-form");
var $preview= $f.find(':input[name="preview"]');
if ($preview.attr("value") == '') $preview.attr("value","1");
f
和 $f
是为了方便操作预先定义好的。 貌似还是不用 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);
};
[SiteLog]JQ AJAX 跨子域Post再总结
程序人生,站务记录
.www.syhtcgf.com
,所以cookie信息正常传递给了 mt.www.syhtcgf.com
后台。$.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
了吧?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;
XDomainRequest
对象。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]-->
code
error: function(){ f.submit(); }
[JQ+Perl]JQ AJAX跨域请求HTML/JS页面内容总结
Perl,站务记录
而小站的 blog 主页 的分页获取是通过 jQuery 的AJAX完成的。
见抓图。
核心代码为自写。如下:
code
function 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*/ } ,
});
}
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 版本。 但是,这个脚本还是有问题的。
原因很简单: ajax 不能跨域。(当然某些BT 的 ie 版本正常跨域,汗。) 有没有办法解决这个问题呢?
即让后台返回的数据为code
mycallback( {"error":null,"result":{"next_url":"下一页的地址","content":"本页展示数据"}} );
当然需要修改核心代码,让 $.ajax 工作在 JSONP 下:
code
function 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*/ } ,
});
}
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提交评论
Movable Type,程序人生
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
[SiteLog]网站改版和移动访问优化
站务记录
[SiteLog]一则js错误寻找和 jQuery
程序人生,站务记录
最近升级,才发现 LightBox悄悄迁移到了 jQuery 平台。
笑ing, jQuery 貌似越来越份额多了。
于是,打开 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。