JQuery解析HTML、JSON和XML实例详解

时间：2021-05-26

1、HTML

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

fragment.html文件，其内容：
复制代码 代码如下:
<div>hello Jquery</div>

在主页面
Test.html中解析代码
复制代码 代码如下:
$("#a1").click(function(){
$("#div2").load('fragment.html');
return false;
});[code]

2、JSON
JSON文件是test.json，其内容：
[code]
[{"name":"jim","age":"20"},{"name":"lily","age":"18","hobby":["swim","movie"]}]

在主页面
Test.html中解析代码
复制代码 代码如下:
$("#a2").click(function(){
$.getJSON('test.json',function(data){
var html = '<table>';
$.each(data,function(entryIndex,entry){
html += '<tr><td>'+entry.name+'</td><td>'+entry.age+'</td>';
if(entry.hobby){
html += '<td>';
$.each(entry.hobby, function(lineindex,line) {
html += line+",";
});
html += '</td>';
}

html += '</tr>';
});
html += '</table>';
$("#div2").html(html);
return false;
});
});

3、XML
XML文件是test.xml，其内容是：
复制代码 代码如下:
<?xml version="1.0" encoding="utf-8" ?>
<root>
<book id="1">
<name>深入浅出extjs</name>
<author>张三</author>
<price>88</price>
</book>
<book id="2">
<name>锋利的jQuery</name>
<author>李四</author>
<price>99</price>
</book>
<book id="3">
<name>深入浅出flex</name>
<author>王五</author>
<price>108</price>
</book>
<book id="4">
<name>java编程思想</name>
<author>钱七</author>
<price>128</price>
</book>
</root>

在主页面
Test.html中解析代码
复制代码 代码如下:
$("#a3").click(function(){
$.get('test.xml',function(data){
var s="";
$(data).find('book').each(function(i){
var id=$(this).attr('id');
var name=$(this).children('name').text();
var author=$(this).children('author').text();
var price=$(this).children('price').text();
s+=id+" "+name+" "+author+" "+price+"<br>";
});
$('#div2').html(s);
});
});

对JQuery解析不同文档做了一个Demo，Test.html的原码是
复制代码 代码如下:
<html xmlns="http://press

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

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章