20

我是 Jquery 的新手。我正在尝试从“sampleXML.xml”文件中读取数据并在 Html“li”元素中显示该数据。到目前为止我所做的是，我创建的html文件如下：文件名-“Cloudtags.html”：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
    <script  src=Cloudtags.js></script>
    <title>Css Globe: tag clouds</title>
    <link rel="stylesheet" type="text/css" href="Cloudtags.css">
    <script type="text/javascript" src="js/jquery.js"></script>

</head>

<body>

<div id="container">    
    <script type="text/javascript" src="http://cssglobe.com/ads/blogsponsor.js"></script>

    <div id="side">
        <div class="tags">
            <ul class="cld">
                <li class="tag1" id="java"><a href="https://www.google.com">google</a></li> 
                <li class="tag2"><a href="#">Chiessy</a></li>
                <li class="tag3"><a href="#">sitemap</a></li>
                <li class="tag2"><a href="#">Sales</a></li>
                <li class="tag4" ><a href="#">Gohome</a></li>
                <li class="tag1"id="temp"><a href="#">Movies</a></li>
                <li class="tag1"><a href="#">It Jobz</a></li>
                <li class="tag5"><a href="#">Alza</a></li>
                <li class="tag2"><a href="#">Sea food</a></li>
                <li class="tag1"><a href="#">Hospital</a></li>
                <li class="tag3"><a href="#">Smart phone</a></li>
                <li class="tag4"><a href="#">Pizza </a></li>
                <li class="tag1"><a href="#">Aerobics</a></li>
                <li class="tag5"><a href="#">Yahoo...</a></li>
                <li class="tag1"><a href="#">Anti-Virus</a></li>
                <li class="tag2"><a href="#">Travel</a></li>
            </ul>
        </div>
    </div>

    <div id="xmldata"></div>

</div><br>
</body>
</html>

这是我的 .js 文件：

$(document).ready(function() {
    var nm;
    $.ajax({
        type: "GET" ,
        url: "sampleXML.xml" ,
        dataType: "xml" ,
        success: function(xml) {
            $(xml).find('person').each(function() {
                nm= $(this).text()
                $("#temp").html(nm);
            }
        }
    });
});

我的xml文件如下：

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

但这不起作用。我是否需要为 "$.ajax" 链接一些外部文件。所以，请告诉我我在哪里犯了错误。. 提前致谢 。.

4

7 回答 7

30

我想你想要这样，DEMO

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>');

});
于 2013-10-07T10:21:53.620 回答
18

只需将 XML 文件读取为 dataType: "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>');  
    }); 
    }       
});
});

用于 parseXML 的 jQuery 文档

于 2013-10-07T09:17:05.570 回答
1

首先创建文件，然后将您的 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
            }                
        }
    });
});

示例.php 

$xml = "YOUR XML FILE PATH";
$json = json_encode((array)simplexml_load_string($xml)),1);
echo $json;
于 2013-10-07T09:30:13.680 回答
1

responseText 是您正在寻找的。例子：

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

xml 是您的文件在哪里。请记住，这将是您的 xml 格式的字符串。您可以使用其中一些提到的 xmlparse 对其进行解析。

于 2015-04-24T01:02:00.690 回答
1

您可以使用$.each()

假设你xml是

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

在你的Ajax success

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

对于您的情况

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();
        });
    }
于 2013-10-07T09:43:45.063 回答
0

使用 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>');
                });
            }
        });

小提琴链接：https ://jsfiddle.net/pn9xs8hf/2/

来源：使用 jQuery 读取 XML 并将其加载到 HTML 表中

于 2020-08-31T11:45:27.857 回答
0 

 $.get("/folder_name/filename.xml", function (xml) {
 var xmlInnerhtml = xml.documentElement.innerHTML;
 });

于 2018-11-01T12:23:25.813 回答