如何读取jQuery中的xml文件内容并显示在html元素中？
我是Jquery的新手。我试图从“sampleXML.xml”文件中读取数据，并在Html“li”元素中显示这些数据。 到目前为止我所做的是，我已经创build了如下的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”。 所以，请告诉我我在哪里犯错。 。 提前致谢 。 。
我想你想这样， 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>'); });
只要你可以读取XML文件为dataType：“xml”，它会重新调用已经parsing过的xml对象。 你可以使用它作为jQuery的对象，find任何东西或循环扔它…等等。
$(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文档
首先创build文件，然后在数组中转换您的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 } } }); });
sample.php
$xml = "YOUR XML FILE PATH"; $json = json_encode((array)simplexml_load_string($xml)),1); echo $json;
responseText是你在找什么。 例：
$.ajax({ ... complete: function(xhr, status) { alert(xhr.responseText); } });
其中xml是你的文件。 记住这将是你的xmlforms的stringforms。 您可以使用xmlparseparsing它，如其中一些提到的。
你可以使用$.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(); }); }
