Javascript 如何在jQuery中读取xml文件内容并在html元素中显示？

我不熟悉Jquery，我试图从“sampleXML.xml”文件中读取数据，并用Html“li”元素显示这些数据。到目前为止，我已经创建了如下html文件：文件名-“Cloudtags.html”：

我的xml文件如下所示：

<?xml version='1.0' ?>
<doc>
  <person>
    <name>sachin</name>
    <age>21</age>
  </person>
  <person>
    <name>Akash</name>
    <age>18</age>
  </person>
</doc>

萨钦
21
阿卡什
18

但这是行不通的。我需要为“$.ajax”链接一些外部文件吗。 所以，请告诉我哪里出了错。

---

提前谢谢

只需将XML文件读取为数据类型：“XML”，它将返回已解析的XML对象。您可以将其用作jquery对象并查找任何内容或循环抛出它…等等

$(document).ready(function(){
   $.ajax({
    type: "GET" ,
    url: "sampleXML.xml" ,
    dataType: "xml" ,
    success: function(xml) {

    //var xmlDoc = $.parseXML( xml );   <------------------this line
    //if single item
    var person = $(xml).find('person').text();  

    //but if it's multible items then loop
    $(xml).find('person').each(function(){
     $("#temp").append('<li>' + $(this).text() + '</li>');  
    }); 
    }       
});
});

$（文档）.ready（函数（）{
$.ajax({
键入：“获取”，
url:“sampleXML.xml”，
数据类型：“xml”，
成功：函数（xml）{
//var xmlDoc=$.parseXML（xml）；首先在文件中创建xml数据，然后在数组中转换xml数据，并以json格式检索该数据，以获得ajax成功响应

尝试以下操作：

$(document).ready(function () {
    $.ajax({
        type: "POST",
        url: "sample.php",            
        success: function (response) {
            var obj = $.parseJSON(response);
            for(var i=0;i<obj.length;i++){
                // here you can add html through loop
            }                
        }
    });
});  

$xml = "YOUR XML FILE PATH";
$json = json_encode((array)simplexml_load_string($xml)),1);
echo $json;

您可以使用
$。each（）

假设您的
xml
是

<Cloudtags><id>1</id></Cloudtags><Cloudtags><id>2</id></Cloudtags><Cloudtags><id>3</id></Cloudtags>

为了你的案子

success: function (xml) {
        $(xml).find('person').each(function(){// your outer tag of xml
             var name = $(this).find("name").text(); // 
             var age = $(this).find("age").text();
        });
    }

我想你想要这样，

var xmlDoc = $.parseXML( xml ); 

var $xml = $(xmlDoc);

var $person = $xml.find("person");

$person.each(function(){

    var name = $(this).find('name').text(),
        age = $(this).find('age').text();

    $("#ProfileList" ).append('<li>' +name+ ' - ' +age+ '</li>');

});

var xmlDoc=$.parseXML（xml）；
var$xml=$（xmlDoc）；
var$person=$xml.find（“person”）；
$person.each（函数（）{
变量名称=$（this）.find（'name'）.text（），
age=$（this.find（'age'）.text（）；
$（“#ProfileList”）.append（“
”+name+”-“+age+”
”）；
});
responseText是您要查找的内容。例如：

    $.ajax({
...
complete: function(xhr, status) {
alert(xhr.responseText);
}
});

其中xml是您的文件。请记住，这将是字符串形式的xml。您可以使用xmlparse解析它，正如其中一些人所提到的那样。

$.get（“/folder\u name/filename.xml”，函数（xml）{
var xmlInnerhtml=xml.documentElement.innerHTML；
})；
使用Ajax调用获取XML，找到主元素，循环遍历所有元素并在表中追加数据

示例代码

 //ajax call to load XML and parse it
        $.ajax({
            type: 'GET',
            url: 'https://res.cloudinary.com/dmsxwwfb5/raw/upload/v1591716537/book.xml',           // The file path.
            dataType: 'xml',    
            success: function(xml) {
               //find all book tags, loop them and append to table body
                $(xml).find('book').each(function() {
                    
                    // Append new data to the tbody element.
                    $('#tableBody').append(
                        '<tr>' +
                            '<td>' +
                                $(this).find('author').text() + '</td> ' +
                            '<td>' +
                                $(this).find('title').text() + '</td> ' +
                            '<td>' +
                                $(this).find('genre').text() + '</td> ' +
                                '<td>' +
                                $(this).find('price').text() + '</td> ' +
                                '<td>' +
                                $(this).find('description').text() + '</td> ' +
                        '</tr>');
                });
            }
        });

//加载XML并解析它的ajax调用
$.ajax({
键入：“GET”，
网址：'https://res.cloudinary.com/dmsxwwfb5/raw/upload/v1591716537/book.xml“，//文件路径。
数据类型：“xml”，
成功：函数（xml）{
//找到所有图书标签，循环它们并附加到表体
$（xml）.find（'book'）.each（函数（）{
//将新数据附加到tbody元素。
$（'#表体'）。追加(
'' +
'' +
$（this.find（'author'）.text（）+“”+
'' +
$（this.find（'title'）.text（）+“”+
'' +
$（this.find（'genre'）.text（）+“”+
'' +
$（this.find（'price'）.text（）+“”+
'' +
$（this）.find（'description'）.text（）+“”+
'');
});
}
});

小提琴链接：

来源：
简单的方法是创建一个文件，然后将xml转换为json，然后在ajax响应中检索该json。请看我下面给出的答案。什么不起作用？你能拉取文件吗？你能解析文件吗？而且你似乎缺少一个分号。添加temp div后的行应该是}）；Thanx@ChrisC，但它仍然不起作用。我只想显示值“sachin”和“21”。因此，请您建议更多更正。您应该直接使用$（xml），而不进行解析，因为它已经是xml对象类型
var xmlDoc = $.parseXML( xml ); 

var $xml = $(xmlDoc);

var $person = $xml.find("person");

$person.each(function(){

    var name = $(this).find('name').text(),
        age = $(this).find('age').text();

    $("#ProfileList" ).append('<li>' +name+ ' - ' +age+ '</li>');

});

    $.ajax({
...
complete: function(xhr, status) {
alert(xhr.responseText);
}
});

 //ajax call to load XML and parse it
        $.ajax({
            type: 'GET',
            url: 'https://res.cloudinary.com/dmsxwwfb5/raw/upload/v1591716537/book.xml',           // The file path.
            dataType: 'xml',    
            success: function(xml) {
               //find all book tags, loop them and append to table body
                $(xml).find('book').each(function() {
                    
                    // Append new data to the tbody element.
                    $('#tableBody').append(
                        '<tr>' +
                            '<td>' +
                                $(this).find('author').text() + '</td> ' +
                            '<td>' +
                                $(this).find('title').text() + '</td> ' +
                            '<td>' +
                                $(this).find('genre').text() + '</td> ' +
                                '<td>' +
                                $(this).find('price').text() + '</td> ' +
                                '<td>' +
                                $(this).find('description').text() + '</td> ' +
                        '</tr>');
                });
            }
        });