如何在 jQuery 中读取 xml 文件内容并在 html 元素中显示？
[英]How to read xml file contents in jQuery and display in html elements?
问题描述
I am new to Jquery.I am trying to read data from "sampleXML.xml" file and display that data in Html "li" elements.
我是 Jquery 的新手。我试图从“sampleXML.xml”文件中读取数据并在 Html“li”元素中显示该数据。 so far I have done is, I have created html file as follows:file name-"Cloudtags.html":到目前为止我所做的是，我已经创建了如下的 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" .我是否需要为 "$.ajax" 链接一些外部文件。 So ,please tell me where I'm making mistake .所以，请告诉我我哪里出错了。 . . thanks in advance .提前致谢 。 . .
7 个解决方案
解决方案1
29 2013-10-07 10:21:53
解决方案2
17 2013-10-07 09:17:05
Simply you can read XML file as dataType: "xml", it will retuen xml object already parsed.只需将 XML 文件读取为 dataType:"xml"，它将返回已解析的 xml 对象。 you can use it as jquery object and find anything or loop throw it…etc.你可以将它用作 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>');
});
}
});
});
解决方案3
1 2013-10-07 09:30:13
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;
解决方案4
1 2013-10-07 09:43:45
You can use $.each()您可以使用$.each()
Suppose your xml is假设你的xml是
<Cloudtags><id>1</id></Cloudtags><Cloudtags><id>2</id></Cloudtags><Cloudtags><id>3</id></Cloudtags>
In your Ajax success在您的Ajax success
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();
});
}
解决方案5
1 2015-04-24 01:02:00
responseText is what you are looking for. responseText 是您要查找的内容。 Example:例子：
$.ajax({
...
complete: function(xhr, status) {
alert(xhr.responseText);
}
});
Where xml is your file.其中 xml 是您的文件。 Remember this will be your xml in the form form of a string.请记住，这将是字符串形式的 xml。 You can parse it using xmlparse as some of them mentioned.您可以使用 xmlparse 解析它，正如其中一些提到的那样。
解决方案6
0 2018-11-01 12:23:25
$.get("/folder_name/filename.xml", function (xml) { var xmlInnerhtml = xml.documentElement.innerHTML; });解决方案7
0 2020-08-31 11:45:27
Get the XML using Ajax call, find the main element, loop through all the element and append data in table.使用 Ajax 调用获取 XML，找到主要元素，遍历所有元素并将数据附加到表中。
Sample code示例代码
//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>');
});
}
});
Fiddle link: https://jsfiddle.net/pn9xs8hf/2/小提琴链接： https : //jsfiddle.net/pn9xs8hf/2/
Source: Read XML using jQuery & load it in HTML Table来源： 使用 jQuery 读取 XML 并将其加载到 HTML 表中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.