Detailed explanation of JQuery parsing HTML, JSON and XML examples_jquery

WBOY

Release： 2016-05-16 16:53:58

Original

1263 people have browsed it

1. HTML

Sometimes an HTML fragment is saved in an HTML file, the HTML file is directly read on another main page, and then the HTML code fragment inside is parsed and integrated into the main page.

fragment.html file, its content:

Copy code The code is as follows:

< ;div>hello Jquery

Parse the code in the main page
Test.html

Copy the code The code is as follows:

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

2. JSON
The JSON file is test.json, its content:
[code]
[{"name":"jim","age":"20 "},{"name":"lily","age":"18","hobby":["swim","movie"]}]

Parse the code in the main page
Test.html

Copy the code The code is as follows:

 
$("#a2").click(function(){ 
 $.getJSON('test.json',function(data){ 
 var html = ''; 
                                                                                                                                               td>'; 
                                          ​) { 
 html = line ","; 
                                      html = ''; 
 }); 
         html = '';                                                                                                                


3. XML

The XML file is test.xml, its content is: 




Copy code

The code is as follows:

  
        深入浅出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的原码是

复制代码代码如下: