JQuery解析HTML、JSON和XML实例详解
1、html
有的时候会将一段html片段保存在html文件中,在另外的主页面直接读取该html文件,然后解析里面的html代码片段融入到主页面中。
fragment.html文件,其内容:
. 代码如下:
<p>hello jquery</p>
在主页面
test.html中解析代码
. 代码如下:
$("#a1").click(function(){
$("#p2").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>';
$("#p2").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+" nbsp; "+author+" "+price+"<br>";
});
$('#p2').html(s);
});
});
对jquery解析不同文档做了一个demo,test.html的原码是
. 代码如下:
<html xmlns="https://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(){
$("#p2").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>';
$("#p2").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>";
});
$('#p2').html(s);
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<ul id="p1">
<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>
<p id ="p2"></p>
</form>
<p>
</p>
</body>
</html>
利用firefox打开该test.html文件,效果如下
点第一个超链接会在show content区域显示新插入的html片段
点第二个超链接,会显示json数据:
点第三个超链接,会显示xml数据:
下一篇: Oracle11g: datetime
推荐阅读
-
JQuery解析HTML、JSON和XML实例详解
-
JQuery解析HTML、JSON和XML实例详解_jquery
-
javascript解析ajax返回的xml和json格式数据实例详解
-
jQuery解析返回的xml和json方法详解
-
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
-
javascript解析ajax返回的xml和json格式数据实例详解
-
jQuery解析返回的xml和json方法详解
-
Asp.Net+Jquery.Ajax详解10-JSON和XML+写在最后
-
JQuery解析HTML、JSON和XML实例详解_jquery
-
jQuery解析Json实例详解_jquery