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

当前位置: 编程技术>WEB前端

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

来源: 互联网发布时间：2014-08-25

本文导语: 1、HTML 有的时候会将一段HTML片段保存在HTML文件中，在另外的主页面直接读取该HTML文件，然后解析里面的HTML代码片段融入到主页面中。 fragment.html文件，其内容：代码如下:hello Jquery 在主页面Test.html中解析代码代码如下:$("#a1")...

1、HTML

有的时候会将一段HTML片段保存在HTML文件中，在另外的主页面直接读取该HTML文件，然后解析里面的HTML代码片段融入到主页面中。

fragment.html文件，其内容：

代码如下:

hello Jquery

在主页面
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 = '';  
            $.each(data,function(entryIndex,entry){  
                html += ''+entry.name+''+entry.age+'';  
                if(entry.hobby){  
                    html += '';  
                    $.each(entry.hobby, function(lineindex,line) {  
                        html += line+",";  
                    });  
                    html += '';  
                }  

                html += '';  
            });  
            html += '';  
            $("#div2").html(html);  
            return false;  
       });  
    });  

3、XML
XML文件是test.xml，其内容是：

代码如下:

  
        深入浅出extjs  
        张三  
        88  
      
        锋利的jQuery  
        李四  
        99  
      
        深入浅出flex  
        王五  
        108  
      
        java编程思想  
        钱七  
        128

在主页面
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+"
";  
            });  
            $('#div2').html(s);  
        });  
    });  

对JQuery解析不同文档做了一个Demo，Test.html的原码是

代码如下:

$(function(){
    $("#a1").click(function(){
       $("#div2").load('fragment.html');
       return false;
    });

    $("#a2").click(function(){
        $.getJSON('test.json',function(data){
            var html = '';
            $.each(data,function(entryIndex,entry){
                html += ''+entry.name+''+entry.age+'';
                if(entry.hobby){
                    html += '';
                    $.each(entry.hobby, function(lineindex,line) {
                        html += line+",";
                    });
                    html += '';
                }

                html += '';
            });
            html += '';
            $("#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+"
";
            });
            $('#div2').html(s);
        });
    });
});