使用jquery将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 />"); 
});

我认为这可以帮助你，'http：//stackoverflow.com/questions/13534945/use-jquery-to-load-xml-file-edit-it-then-save-to-server-again-with -php' – dreamweiver 2013-05-07 10:53:49

答

试试这个：

// 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()

请检查更新后的问题。我添加了要添加的XML数据。请问你可以试试这些数据吗？谢谢 – Sowmya 2013-05-07 11:36:06

在您的示例xml中找不到'name'标签。请检查一次！ – 2013-05-07 11:37:28

name =“Myt”这是一个 – Sowmya 2013-05-07 11:40:10

答

您需要转义HTML特殊字符。在将文本设置为div之前使用此功能。

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

答

- 你必须调用XML文件中的第一

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

答

试试这个：

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 />"); 
}

请检查更新的问题。我添加了要添加的XML数据。请问你可以试试这些数据吗？谢谢 – Sowmya 2013-05-07 11:41:17

“XML”中的'name'标签在哪里？ – 2013-05-07 12:06:07

检查以上。 – 2013-05-07 12:32:40

答

如果你想读像我这样一个本地文件，你可以做到以下几点：

<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。

使用jquery将xml文件内容加载到div

相关推荐