如何在 jQuery 中读取 xml 文件内容并在 html 元素中显示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19220873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to read xml file contents in jQuery and display in html elements?
提问by sachin_ware
I am new to Jquery.I am trying to read data from "sampleXML.xml" file and display that data in Html "li" elements. so far I have done is, I have created html file as follows:file name-"Cloudtags.html":
我是 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>
and this is my .js file:
这是我的 .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);
}
}
});
});
My xml file is as follows:
我的xml文件如下：
<?xml version='1.0' ?>
<doc>
<person>
<name>sachin</name>
<age>21</age>
</person>
<person>
<name>Akash</name>
<age>18</age>
</person>
</doc>
But this does not work. Do I need to link some external file for "$.ajax" . So ,please tell me where I'm making mistake . . thanks in advance . .
但这不起作用。我是否需要为 "$.ajax" 链接一些外部文件。所以，请告诉我我哪里出错了。. 提前致谢 。.
回答by Rishi Php
回答by Chris Charles
Simply you can read XML file as dataType: "xml", it will retuen xml object already parsed. you can use it as jquery object and find anything or loop throw it…etc.
只需将 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>');
});
}
});
});
回答by Dhaval Bharadva
First of all create on file and then convert your xml data in array and retrieve that data in json format for ajax success response.
首先在文件上创建，然后将您的 xml 数据转换为数组并以 json 格式检索该数据以获得 ajax 成功响应。
Try as below:
尝试如下：
$(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
示例.php
$xml = "YOUR XML FILE PATH";
$json = json_encode((array)simplexml_load_string($xml)),1);
echo $json;
回答by Ajith S
You can use $.each()
您可以使用 $.each()
Suppose your xmlis
假设你xml是
<Cloudtags><id>1</id></Cloudtags><Cloudtags><id>2</id></Cloudtags><Cloudtags><id>3</id></Cloudtags>
In your Ajaxsuccess
在你的 Ajaxsuccess
success: function (xml) {
$(xml).find('Cloudtags').each(function(){// your outer tag of xml
var id = $(this).find("id").text(); //
});
}
For your case
对于您的情况
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();
});
}
回答by Revanth Kumar
responseText is what you are looking for. Example:
responseText 是您要查找的内容。例子：
$.ajax({
...
complete: function(xhr, status) {
alert(xhr.responseText);
}
});
Where xml is your file. Remember this will be your xml in the form form of a string. You can parse it using xmlparse as some of them mentioned.
其中 xml 是您的文件。请记住，这将是字符串形式的 xml。您可以使用 xmlparse 解析它，正如其中一些提到的那样。
回答by sakthi sudhan
$.get("/folder_name/filename.xml", function (xml) {
var xmlInnerhtml = xml.documentElement.innerHTML;
});