使用jquery將xml文件內容加載到div

Question

如何將xml文件內容加載到div。

這裏是我的HTML中，我需要加載XML內容

<div class="editorial" id="news-container"> 
</div> 

XML數據

<contentprogramming> 
    <category name = "My t" id = "1"> 
     <logo>http://123.png</logo>   
     <channel name="res" id= "1" type="ecommerce">    
      <logo>http://11.png</logo>   
      <items>    
       <item id="1"> 
        <image>http://11.jpg</image> 
        <title>Memory Card MSMT2G</title> 
        <details>$6.99</details> 
        <linkurl>http://www.test.com/Sony</linkurl> 
       </item> 
       <item id="2"> 
        <image>http://i2.jpg</image> 
        <title>Apple iPad </title> 
        <details>$579.95</details> 
        <linkurl>http://www.test.com/Apple</linkurl> 
       </item> 
      </items> 
     </channel> 
    </category> 
</contentprogramming> 

和XML文件名是something.xml

我嘗試了幾種方法，但它沒」 t工作:(

我試過下面的方法，但沒有工作。

$('something.xml').find('name').each(function() { 
    $("#news-container").append($(this).text() + "<br />"); 
}); 

Answer 1

試試這個：

// Load the xml file using ajax 
$.ajax({ 
    type: "GET", 
    url: "something.xml", 
    dataType: "xml", 
    success: function (xml) { 

     // Parse the xml file and get data 
     var xmlDoc = $.parseXML(xml), 
      $xml = $(xmlDoc); 
     $xml.find('category[name="My t"] logo').each(function() { 
      $("#news-container").append($(this).text() + "<br />"); 
     }); 
    } 
}); 

參考：1. jQuery.ajax() 2. parseXML()

Answer 2

您需要轉義HTML特殊字符。在將文本設置爲div之前使用此功能。

function htmlSpecialChars(unsafe) { 
    return unsafe 
    .replace(/&/g, "&") 
    .replace(/</g, "&lt;") 
    .replace(/>/g, "&gt;") 
    .replace(/"/g, "&quot;"); 
} 

Answer 3

- 你必須調用XML文件中的第一

$.ajax({ 
     url: '/something.xml', 
     type: "GET", 
     dataType: "xml", 
     success: function (result) { 
      $(result).find('name').each(function() { 
       $("#news-container").append($(this).text() + "<br />"); 
      } 
      } 
     }); 

Answer 4

試試這個：

var xml='<contentprogramming><category name = "My t" id = "1"><logo>http://123.png</logo><channel name="res" id= "1" type="ecommerce"><logo>http://11.png</logo> <items><item id="1"><image>http://11.jpg</image><title>Memory Card MSMT2G</title><details>$6.99</details><linkurl>http://www.test.com/Sony</linkurl></item><item id="2"><image>http://i2.jpg</image><title>Apple iPad </title><details>$579.95</details><linkurl>http://www.test.com/Apple</linkurl></item> </items></channel></category></contentprogramming>'; 
xmlDoc = $.parseXML(xml), 
$xml = $(xmlDoc), 
$xml.find("category[name='My t'] logo").each(function() { 
    $("#news-container").append($(this).text() + "<br />"); 
} 

Answer 5

如果你想讀像我這樣一個本地文件，你可以做到以下幾點：

<input type="file" id="file" accept="text/xml"> 
<script type="text/javascript"> 
document.getElementById('file').addEventListener('change', function (evt) { 
    if (!evt.target.files){ 
     return; 
    } 

    var file = evt.target.files ? evt.target.files[0] : null, 
     reader = new FileReader(); 

    reader.onload = function (evt) { 
     console.log(evt.target.result); 
    }; 

    reader.readAsText(file); 
}); 
</script> 

這需要用戶選擇文件，但它確實讓你的文件的內容。它使用HTML5 FileReader API。