欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-16 12:11:10
1、html 有的时候会将一段html片段保存在html文件中,在另外的主页面直接读取该html文件,然后解析里面的html代码片段融入到主页面中。 fragment.html...

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文件,效果如下

 

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

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

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

点第二个超链接,会显示json数据:

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

点第三个超链接,会显示xml数据:

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