Ajax 和模版
当你需要不刷新页面而加载更多数据,ajax 是个不错的选择,怎么把 ajax 异步加载的数据优雅地拼接起来,就需要用到模版引擎了。复杂的交互都离不开 ajax 和模版,下面介绍如何在 JX 中使用 ajax 和模版。
处理 ajax,我们主要用到 http 包的 ajax 方法:J.http.ajax(uri, option)
第一个参数是 ajax 请求的 url,第二个参数是一个包括请求选项的 Object。
示例代码
处理 js 模版,我们主要用到 string 包的 template 方法:J.string.template(string, data)
第一个参数是 “模版字符串” 或 “模版 id”,第二个参数是模版填充的数据。
下面我们通过一个程序演示其用法。
处理 ajax,我们主要用到 http 包的 ajax 方法:J.http.ajax(uri, option)
第一个参数是 ajax 请求的 url,第二个参数是一个包括请求选项的 Object。
示例代码
1 2 3 4 5 6 7 8 9 10 11 12 |
J.http.ajax("vcard.json",{ method: "GET", data: null, arguments: null, onSuccess: function(){}, onError: function(){}, onComplete: function(){}, onTimeout: function(){}, isAsync: true, timeout: 30000, contentType: "utf-8" }); |
处理 js 模版,我们主要用到 string 包的 template 方法:J.string.template(string, data)
第一个参数是 “模版字符串” 或 “模版 id”,第二个参数是模版填充的数据。
下面我们通过一个程序演示其用法。
第二个程序
这是一个展示名片的程序,由于用到 ajax,不支持 file 协议,你需要一个服务器(能用 http 协议访问你的网页即可)。
首先,新建一个 html 文件,在里面加入以下代码:
然后,新建一个 vcard.js 文件,在里面加入以下代码:
好了,我们还差数据,新建一个 vcard.json 文件,在里面加入以下代码:
现在把以上三个文件放到你的服务器上,就可以看效果了。你也可以猛击这里直接看 demo
首先,新建一个 html 文件,在里面加入以下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>VCard</title> <style type="text/css"> .card{ width:240px; height:160px; border:1px solid #999; background:#fff; overflow:hidden; } .avatar{ width:50px; height:50px; margin:18px; float:left; overflow:hidden; } .avatar img{ max-width:50px; max-height:50px; } .card p{ font:14px/25px "Microsoft Yahei", Arial, Simsun; margin:12px 18px; color:#000; } .detail{ color:#ccc; word-break:break-all; } </style> </head> <body> <div id="wrap">Loading...</div> <script type="text/javascript" src="http://pub.idqqimg.com/lib/jx/1.0.1/jx-uiless.js" charset="UTF-8"></script> <script type="text/javascript" src="vcard.js"></script> <script id="vcardTmpl" type="text/template"> <div class="card"> <div class="avatar"><img src="<%=avatar%>" /></div> <p>昵称:<%=nick%></p> <p>性别:<%=sex=='M'?'男':sex=='F'?'女':'其他'%></p> <p class="detail">简介:<%=detail || '这个家伙很懒,什么也没有留下'%></p> </div> </script> </body> </html> |
然后,新建一个 vcard.js 文件,在里面加入以下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Jx().$package("vCard",function(J){ function callback(data){ if(data.status==200 && data.responseJSON){ var wrapEl=J.dom.id('wrap'); wrapEl.innerHTML=J.string.template('vcardTmpl',data.responseJSON); }else{ alert('出错了'); } } J.http.ajax('vcard.json',{ data:{ id:12345 }, onSuccess:callback, onError:callback, onTimeout:callback, type:'json' }); }); |
好了,我们还差数据,新建一个 vcard.json 文件,在里面加入以下代码:
1 2 3 4 5 6 7 |
{ "id":12345, "avatar":"http://0.gravatar.com/avatar/ef1f0d589d3f5c05b623a9786ce792be?s=50&d=wavatar&r=G", "nick":"Sheran", "sex":"F", "detail":"真实,大方,豁达~~~~~~~" } |
现在把以上三个文件放到你的服务器上,就可以看效果了。你也可以猛击这里直接看 demo
代码解释
1 |
<div id="wrap">Loading...</div> |
我们加入了一个容器
1 2 3 4 5 6 7 8 |
<script id="vcardTmpl" type="text/template"> <div class="card"> <div class="avatar"><img src="<%=avatar%>" /></div> <p>昵称:<%=nick%></p> <p>性别:<%=sex=='M'?'男':sex=='F'?'女':'其他'%></p> <p class="detail">简介:<%=detail || '这个家伙很懒,什么也没有留下'%></p> </div> </script> |
这是我们的模版,type 为 “text/template” 的 script 标签不会被浏览器显示或者执行,我们可以通过 id 引用它,并取得它的 innerHTML。在模版里,我们用标识 js 代码,用标识变量,外的是 html 代码,我们甚至可以在模版里写表达式写 for 语句等。
1 2 3 4 5 6 7 8 9 |
J.http.ajax('vcard.json',{ data:{ id:12345 }, onSuccess:callback, onError:callback, onTimeout:callback, type:'json' }); |
通过 ajax 请求了 vcard.json?id=12345,默认使用 GET 方法,指定 callback 为回调方法。
1 2 |
var wrapEl=J.dom.id('wrap'); wrapEl.innerHTML=J.string.template('vcardTmpl',data.responseJSON); |
我们把模版的 id 和 ajax 请求返回的数据传给模版引擎,把渲染结果填到 wrap。
温馨提示
设置 innerHTML 需要注意对变量进行转义,避免 xss 和排版错乱,JX 的 string 包提供了几个常用的转义方法,可以直接作为参数传给模版引擎使用,例如:
1 2 3 4 |
J.string.template('Hello <%=html(nick)%>',{ nick:'LiLei<(▰˘◡˘▰)>', html:J.string.encodeHtmlSimple }); |
更多 JX 框架活生生的 Demo,请猛戳 JX Live Demo。
88 2016 年 1 月 27 日
77
Vampire_D 2014 年 4 月 29 日
有没有 H.comet(url, option) 的实例啊。。。
zwz 2013 年 11 月 19 日
JX Live Demo
Dom > setStyle & getStyle 404
First 2013 年 11 月 14 日
昵称:这种写法,在.net 页面里会报错,如何解决
小徐 2013 年 9 月 20 日
webqq 富客户端怎么实现的啊
ppanda 2013 年 9 月 18 日
很好,来学习下
小徐 2013 年 9 月 3 日
官方教程来的太慢了…
小徐 2013 年 9 月 2 日
JX 框架学习中…