JQuery解析HTML、JSON和XML實(shí)例詳解
1、HTML
有的時(shí)候會(huì)將一段HTML片段保存在HTML文件中,在另外的主頁(yè)面直接讀取該HTML文件,然后解析里面的HTML代碼片段融入到主頁(yè)面中。
fragment.html文件,其內(nèi)容:
<div>hello Jquery</div>
在主頁(yè)面
Test.html中解析代碼
$("#a1").click(function(){
$("#div2").load('fragment.html');
return false;
});[code]
2、JSON
JSON文件是test.json,其內(nèi)容:
[code]
[{"name":"jim","age":"20"},{"name":"lily","age":"18","hobby":["swim","movie"]}]
在主頁(yè)面
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,其內(nèi)容是:
<?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>
在主頁(yè)面
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);
});
});
對(duì)JQuery解析不同文檔做了一個(gè)Demo,Test.html的原碼是
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#a1").click(function(){
$("#div2").load('fragment.html');
return false;
});
$("#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;
});
});$("#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);
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<ul id="div1">
<li><a id="a1" href="#">show html fragment</a></li>
<li><a id="a2" href="#">show json</a></li>
<li><a id="a3" href="#">show xml</a></li>
</ul>
<p>Show Content:</p>
<div id ="div2"></div>
</form>
<div>
</div>
</body>
</html>
利用FireFox瀏覽器打開(kāi)該Test.html文件,效果如下
點(diǎn)第一個(gè)超鏈接會(huì)在Show Content區(qū)域顯示新插入的html片段
點(diǎn)第二個(gè)超鏈接,會(huì)顯示json數(shù)據(jù):
點(diǎn)第三個(gè)超鏈接,會(huì)顯示xml數(shù)據(jù):
PS:這里再為大家提供幾款關(guān)于json與xml操作的在線工具供大家參考使用:
在線XML/JSON互相轉(zhuǎn)換工具:
http://tools.jb51.net/code/xmljson
在線格式化XML/在線壓縮XML:
http://tools.jb51.net/code/xmlformat
XML在線壓縮/格式化工具:
http://tools.jb51.net/code/xml_format_compress
在線JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具:
http://tools.jb51.net/code/json
JSON在線格式化工具:
http://tools.jb51.net/code/jsonformat
- jQuery 解析xml文件
- jQuery+ajax讀取并解析XML文件的方法
- 使用jquery解析XML的方法
- jQuery 行級(jí)解析讀取XML文件(附源碼)
- JQuery解析XML數(shù)據(jù)的幾個(gè)簡(jiǎn)單實(shí)例
- jquery解析XML字符串和XML文件的方法說(shuō)明
- jQuery解析返回的xml和json方法詳解
- 用JQuery 實(shí)現(xiàn)AJAX加載XML并解析的腳本
- Jquery Ajax解析XML數(shù)據(jù)(同步及異步調(diào)用)簡(jiǎn)單實(shí)例
- JQuery解析XML的方法小結(jié)
- jQuery實(shí)現(xiàn)的解析本地 XML 文檔操作示例
相關(guān)文章
在IE 瀏覽器中使用 jquery的fadeIn() 效果 英文字符字體加粗
在IE 瀏覽器中使用 jquery的fadeIn() 效果 英文字符字體加粗的解決方法分享。2011-06-06基于jQuery實(shí)現(xiàn)多層次的手風(fēng)琴效果附源碼
今天我們要與大家分享一個(gè)漂亮而靈活的垂直 jQuery 手風(fēng)琴效果。其主要思想是擴(kuò)大手風(fēng)琴片上的點(diǎn)擊和顯示更多的信息。感興趣的朋友可以參考下本文2015-09-09有關(guān)jquery與DOM節(jié)點(diǎn)操作方法和屬性記錄
下面小編就為大家?guī)?lái)一篇有關(guān)jquery與DOM節(jié)點(diǎn)操作方法和屬性記錄。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-04jquery html添加元素/刪除元素操作實(shí)例詳解
這篇文章主要介紹了jquery html添加元素/刪除元素操作,結(jié)合實(shí)例形式詳細(xì)分析了jquery html添加元素/刪除元素相關(guān)函數(shù)功能、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05jQuery使用andSelf()來(lái)包含之前的選擇集
使用Destructive Method對(duì)wrapper set進(jìn)行選擇、過(guò)濾之后會(huì)產(chǎn)生一個(gè)新的結(jié)果集,可以使用andSelf()來(lái)包含之前的選擇集2014-05-05jquery判斷當(dāng)前瀏覽器的實(shí)現(xiàn)代碼
這篇文章主要介紹了jquery判斷當(dāng)前瀏覽器的實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-11-11解決IE7中使用jQuery動(dòng)態(tài)操作name問(wèn)題
IE7中無(wú)法使用Jquery動(dòng)態(tài)操作頁(yè)面元素的name屬性,怎么解決這個(gè)問(wèn)題呢?下面小編給大家?guī)?lái)了解決IE7中使用jQuery動(dòng)態(tài)操作name問(wèn)題,需要的朋友參考下吧2017-08-08select標(biāo)簽?zāi)M/美化方法采用JS外掛式插件
select標(biāo)簽的外觀問(wèn)題很惱人,各個(gè)瀏覽器都不一致,單單就IE,一個(gè)版本就一個(gè)長(zhǎng)相,還不能用CSS修飾,接下來(lái)將本人對(duì)select的美化方法共享出來(lái),感興趣的朋友可以參考下2013-04-04