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

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://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浏览器打开该Test.html文件，效果如下

点第一个超链接会在Show Content区域显示新插入的html片段

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

点第三个超链接，会显示xml数据：

PS：这里再为大家提供几款关于json与xml操作的在线工具供大家参考使用：

在线XML/JSON互相转换工具：
http://tools.jb51.net/code/xmljson

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

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

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

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

赞 (0)

相关推荐

  • JQuery 解析多维的Json数据格式

    这就要利用到JQuery,ASHX以及Json来合作了.一篇文章有多个评论,每十个为一页.用户每点击下一页则自动抓去下一页,这个过程采用无刷新放心进行. Json格式其实和表格式有异曲同工之妙,在网络传输中,它比XML还省流量,而且与JS有更好的融合,更容易被解析.Json格式样例如下: 复制代码 代码如下: {"Products":[ {"orderid":"11077","customerid":"RATTC&q

  • Jquery解析json字符串及json数组的方法

    本文实例讲述了Jquery解析json字符串及json数组的方法.分享给大家供大家参考.具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-1.6.2.min.js"></script> </head> <body> <hr /> <h3>

  • jquery JSON的解析方式

    这里考虑都考虑的是服务器返回的是JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里首先给出JSON字符串集,字符串集如下: 复制代码 代码如下: var data=" { root: [ {name:'1',value:'0'}, {name:'6101',value:'西安市'}, {name:'6102',value:'铜川市'}, {name:'6103',value:'宝鸡市'}, {name:'6104',valu

  • jquery遍历筛选数组的几种方法和遍历解析json对象

    jquery grep()筛选遍历数组 复制代码 代码如下: $().ready( function(){ var array = [1,2,3,4,5,6,7,8,9]; var filterarray = $.grep(array,function(value){ return value > 5;//筛选出大于5的 }); for(var i=0;i<filterarray.length;i++){ alert(filterarray[i]); } for (key in filtera

  • jquery eval解析JSON中的注意点介绍

    在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的each方法来遍历 用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里首先给出JSON字符

  • Jquery ajax不能解析json对象，报Invalid JSON错误的原因和解决方法

    下面说一下,最近在使用jquery 1.4中使用$.ajax()方法解析json对象遇到的问题. Json对象是: 复制代码 代码如下: [{name:'二手房出售',infoCount:0,pageUrl:'/ershoufang'},{name:'二手房求购',infoCount:0,pageUrl:'/qiugou'},{name:'二手房装修',infoCount:0,pageUrl:'/esfzhuangxiu'},{name:'二手回收',infoCount:0,pageUrl:'/

  • js/jquery解析json和数组格式的方法详解

    在解析之前,我们必须弄清楚几个概念:数组,关联数组以及json之间有哪些区别和联系点? 一.概念介绍1.数组 语法: ECMAScript v3规定了数组直接量的语法,JavaScript 1.2和JScript 3.0实现了它.可以把-个用逗号分隔的表达式列表放在方括号中,创建并初始化-个数组.这些表达式的值将成为数组元素.例如: var a = [1, true, 'abc']; 具体操作查看API. ps:必须方括号隔开. 2.关联数组 1.语法:var myhash= {"key1″:&

  • Jquery解析json数据详解

    最近被jquery折磨了一番,倒腾了一个jquery解析json的demo,本demo想实现从asp.net后台实例化dataSet或者dataTable数据集,将dataSet转换成json并返回给客户端,客户端用jquery getJson方法解析出来并显示在页面上. 首先简单介绍一下getJson方法 Jquery.getJson(url,[data],[callback]) url:发送请求地址.data:待发送 Key/value 参数.callback:载入成功时回调函数. 下面是实

  • jQuery怎么解析Json字符串(Json格式/Json对象)

    jQuery怎么解析Json字符串(Json格式/Json对象)

    json数据是我们常用的一种小型的数据实时交换的一个东西,他可以利用jquery或js进行解析,下面我来介绍jquery解析json字符串方法. 我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法. 上例中得到的JSON数据如下,是一个嵌套JSON: { "comments": [ { "content": "很不错嘛", "id": 1, "nickname&

  • 利用jQuery解析获取JSON数据

    JSON 是一种比较方便的数据形式,下面使用$.getJSON方法,实现获得JSON数据和解析,都挺方便简单的.从http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=? 这个地址得到JSON数据 并且分析里面的结构,生成图片和相关链接等: 复制代码 $(function(){ var url="http://api.flic

随机推荐