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

Load xml file content into div using jquery

提问by Sowmya

How to load the xml file content to a div.

如何将 xml 文件内容加载到 div。

Here is my HTML in which I need to load XML content

这是我需要在其中加载 XML 内容的 HTML

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

XML Data

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>.99</details>
                    <linkurl>http://www.test.com/Sony</linkurl>
                </item>
                <item id="2">
                    <image>http://i2.jpg</image>
                    <title>Apple iPad </title>
                    <details>9.95</details>
                    <linkurl>http://www.test.com/Apple</linkurl>
                </item> 
            </items>
        </channel>
    </category>
</contentprogramming>

And xml file name is something.xml

和 xml 文件名是 something.xml

I tried several ways but it didn't work :(

我尝试了几种方法，但没有奏效:(

I tried the below method but didn't work.

我尝试了下面的方法，但没有奏效。

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

回答by pala?н

Try this:

尝试这个：

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

Reference: 1. jQuery.ajax()2. parseXML()

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

回答by dino.keco

You need to escape HTML special chars. Use this function before setting text into div.

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

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

回答by ahmed alnahas

-- you must call xml file first

-- 必须先调用xml文件

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

回答by jstaab

If you have a local file you want to read like I do, you can do the following:

如果你有一个像我一样想要阅读的本地文件，你可以执行以下操作：

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

This requires the user to select the file, but it does get you the contents of the file. It uses the HTML5 FileReader API.

这需要用户选择文件，但它确实为您提供了文件的内容。它使用HTML5 FileReader API。

回答by Rohan Kumar

Try this:

尝试这个：

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>.99</details><linkurl>http://www.test.com/Sony</linkurl></item><item id="2"><image>http://i2.jpg</image><title>Apple iPad </title><details>9.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 />");
}