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

程序员文章站 2022-04-28 21:22:27

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>