腾讯 Web 前端 JX 框架入门教程 (二)
In JavaScript on 2013年08月31日 by view: 14,873
8

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,不支持 file 协议,你需要一个服务器(能用 http 协议访问你的网页即可)。
首先,新建一个 html 文件,在里面加入以下代码:

然后,新建一个 vcard.js 文件,在里面加入以下代码:

好了,我们还差数据,新建一个 vcard.json 文件,在里面加入以下代码:

现在把以上三个文件放到你的服务器上,就可以看效果了。你也可以猛击这里直接看 demo

代码解释


我们加入了一个容器

这是我们的模版,type 为 “text/template” 的 script 标签不会被浏览器显示或者执行,我们可以通过 id 引用它,并取得它的 innerHTML。在模版里,我们用标识 js 代码,用标识变量,外的是 html 代码,我们甚至可以在模版里写表达式写 for 语句等。

通过 ajax 请求了 vcard.json?id=12345,默认使用 GET 方法,指定 callback 为回调方法。

我们把模版的 id 和 ajax 请求返回的数据传给模版引擎,把渲染结果填到 wrap。

温馨提示

设置 innerHTML 需要注意对变量进行转义,避免 xss 和排版错乱,JX 的 string 包提供了几个常用的转义方法,可以直接作为参数传给模版引擎使用,例如:

更多 JX 框架活生生的 Demo,请猛戳 JX Live Demo

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2013/08/jx-framework-tutorial-b/

  1. 88 2016 年 1 月 27 日

    77

  2. Vampire_D 2014 年 4 月 29 日

    有没有 H.comet(url, option) 的实例啊。。。

  3. zwz 2013 年 11 月 19 日

    JX Live Demo

    Dom > setStyle & getStyle 404

  4. First 2013 年 11 月 14 日

    昵称:这种写法,在.net 页面里会报错,如何解决

  5. 小徐 2013 年 9 月 20 日

    webqq 富客户端怎么实现的啊

  6. ppanda 2013 年 9 月 18 日

    很好,来学习下

  7. 小徐 2013 年 9 月 3 日

    官方教程来的太慢了…

  8. 小徐 2013 年 9 月 2 日

    JX 框架学习中…

发表评论