JQuery解析HTML、JSON和XML实例详解(2)

日期：2020-06-11 栏目：程序人生浏览：次

<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="https://www.jb51.net/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 runat="server">
    <ul>
        <li><a href="#">show html fragment</a></li>
        <li><a href="#">show json</a></li>
        <li><a href="#">show xml</a></li>
    </ul>
        <p>Show Content:</p>
    <div id ="div2"></div>
    </form>
    <div>

</div>
</body>
</html>