JQuery解析HTML、JSON和XML實例詳解_jquery

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){                 html = ' ' entry.name ' ' ] . >                if(entry.hobby){ 
                        $.each(entry.hobby, function(lineindex,line) { 
             }); 
                    html = ''; 
               html = ''; 
            }); 
        }); 
        }); 
   '; 
            $("#div2").html(html); 
            

3、 XML
XML檔案是test.xml，內容為：

複製程式碼 程式碼如下:

 
; 
     
 /name> 
        張三作者> 
        88價格> 
     鋒利的jQuery; 
        李四作者> 
        991; > 
        深入淺出flex 
        王五作者> 
      
        java程式設計想法名稱> 
        🎜>根> 


在主頁面
Test.html中解析代碼




複製代碼

程式碼如下：

$("#a3").click(function(){          $.get('test.xml',function(data){  var s="";             $(data).find('book').each(function(i){                      var name=$(this) .children('name').text();                  var writer=$  Price=$(this) .children('price' ).text();                 s =id "    " 姓名"    ;              $('#div2'). html(s);

        }); 

    }); 


對JQuery解析不同的文檔做了一個子>


複製程式碼


程式碼如下：

 
 
    標題> 
; 
     
     

 $(function(){){
    $("#a1").click(function(){ 
       $("#div2").load('fragment.html'); 
    $("#a2").click(function(){ 
        $.getJSON('test.json',function(data){              $.each(data,function(entryIndex,entry){ 
            🎜>               if(entry.hobby){ 
                    $.each(entry.hobby , function(lineindex,line) { 
               >                  }); 
                } 

               html = ' ';
      >'; 
           $("#div2").html(html); 
          ").click(function() { 
        $.get('test.xml',function(data){ 
            var s="" ; 
            $(data).find('book').each(function(i){ 
                    var name=$(this) .children('name').text(); 
                var writer=$(this).children('author'). children('price' ).text(); 
               s =id "    " 姓名"    " 作者"    
            $('#div2').html(s); 
        }); 
    }); 
});  

     
 
 
   

 
   

 
"> 
       

show html fragment

 
       

show json

 
       

show xml

 
     

Show Content:

 
   

 
   

 
   

 
 

利用FireFox瀏覽器開啟該Test.html文件，效果如下

點第一個超連結會在Show Content區域顯示新插入的html片段

點第二個超鏈接，會顯示json資料：

點第三個超鏈接，會顯示xml資料：