1、超文本标记语言

有的时候会将一段超文本标记语言片段保存在超文本标记语言文件中，在另外的主页面直接读取该超文本标记语言文件，然后解析里面的超文本标记语言代码片段融入到主页面中。

fragment.html文件，其内容：复制代码代码如下：divhello Jquery/div

在主页面Test.html中解析代码复制代码代码如下：美元(' #a1 ').单击(函数(){ $('#div2 ')).加载('片段。html ')；返回false })；[代码]

2、JSONJSON文件是test.json，其内容：[代码][{ '姓名：“吉姆”年龄' :'20'},{ '姓名：“莉莉”年龄' :'18 ','爱好' :['游泳','电影']}]

在主页面Test.html中解析代码复制代码代码如下：美元(' #a2 ').单击(函数(){ $).getJSON('test.json '，function(data){ var html=' table '；$.每个(数据，函数(entryIndex，entry){ html=' trtd ' entry。名称“/tdtd”条目。年龄'/TD '；if(条目。爱好){ html=' TD$.每个(entry.hobby，function(lineindex，line) { html=line '，'；});html='/TD '；} html='/tr '；});html='/table '；$('#div2 ').html(html)；返回false })；});3、XMLXML文件是test.xml，其内容是：复制代码代码如下：可扩展标记语言版本='1.0 '编码='utf-8 '？根图书id='1 '名称深入浅出ext js/作者姓名张三/作者价格88/价格/图书id='2 '名称锋利的jQuery/姓名作者李四/作者价格99/价格/图书id='3 '名称深入浅出flex/姓名作者王五/作者价格108/价格/图书id='4' namejava编程思想/姓名作者钱七/作者价格128/价格/书籍/根在主页面Test.html中解析代码复制代码代码如下：美元(' #a3 ').单击(函数(){ $).get('test.xml '，函数（数据){ var s=$(数据)。查找('书').每个（函数(i){ var id=$(this)).attr(' id ')；var name=$(this).儿童('姓名')。text()；var作者=$(this).儿童('作者')。text()；var price=$(这个)。儿童('价格')。text()；s=id“”姓名' '作者' '价格br '；});$('#div2 ').html })；});对JQuery解析不同文档做了一个演示，测试的原码是复制代码代码如下： html xmlns=' http://www。w3。org/1999/XHTML ' head runat=' server ' title/title meta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8 '脚本类型=' text/JAVAScript ' src=' http : jquery。js /脚本脚本类型=' text/JavaScript ' $(function(){ $(' # a1 ')).单击(函数(){ $('#div2 ')).加载('片段。html ')；返回false })；$('#a2 ').单击(函数(){ $).getJSON('test.json '，function(data){ var html=' table '；$.每个(数据，函数(entryIndex，entry){ html=' trtd ' entry。名称“/tdtd”条目。年龄'/TD '；if(条目。爱好){ html=' TD$.每个(entry.hobby，function(lineindex，line) { html=line '，'；});html='/TD '；} html='/tr '；});html='/table '；$('#div2 ').html(html)；返回false })；});$('#a3 ').单击(函数(){ $).get('test.xml '，函数（数据){ var s=$(数据)。查找('书').每个（函数(i){ var id=$(this)).attr(' id ')；var name=$(this).儿童('姓名')。text()；var作者=$(this).儿童('作者')。text()；var price=$(这个)。儿童('价格')。text()；s=id“”姓名' '作者' '价格br '；});$('#div2 ').html })；});});/脚本/头体表单id=' form 1 ' runat=' server ' ul id=' div 1 ' lia id=' a1 ' href=' # ' show html片段/a/Li lia id=' a2 ' href=' # ' show JSON/a/Li lia id=' a3 ' href=' # ' show XML/a/Li/ul PShow内容：/p div id=' div 2 '/div/form div/body/html

利用火狐浏览器浏览器打开该Test.html文件，效果如下

点第一个超链接会在显示内容区域显示新插入的超文本标记语言片段

点第二个超链接，会显示json数据：

点第三个超链接，会显示可扩展标记语言数据：

PS:这里再为大家提供几款关于json与可扩展标记语言操作的在线工具供大家参考使用：

在线XML/JSON互相转换工具：http://工具。JB 51。net/code/xmljson

在线格式化XML/在线压缩XML:http://工具。JB 51。net/代码/XML格式

XML在线压缩/格式化工具：http://tools.jb51.net/code/xml_format_compress.

在线JSON代码检查，检查，美化和格式化工具：http://tools.jb51.net/code/json.

JSON在线格式化工具：http://tools.jb51.net/code/jsonformat.