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

【问题标题】：Load xml file content into div using jquery使用jquery将xml文件内容加载到div中
【发布时间】：2023-03-09 15:13:01
【问题描述】：

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

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

<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

我尝试了几种方法，但都没有成功:(

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

$('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

标签： jquery xml load

【解决方案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()

【讨论】：

请查看更新后的问题。我添加了要添加的 XML 数据。请问您可以尝试使用该数据吗？谢谢
在您的示例 xml 中找不到 name 标记。请检查一次！
name="Myt" 就是这个
As per this discussion，当从服务器检索时，XML 应该已经被解析，因此您不需要在成功回调中再次调用$.parseXML(xml)。
如何在客户端动态生成 XML 文档，例如页面加载时？当这样的 XML 文档具有关联的 XSLT 时会发生什么？

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

-- 必须先调用xml文件

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

【讨论】：

【解决方案4】：

如果你想像我一样阅读本地文件，你可以这样做：

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

【讨论】：

【解决方案5】：

试试这个：

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 数据。请问您可以尝试使用该数据吗？谢谢
您的XML 中的name 标签在哪里？