如何在 jQuery 中读取 xml 文件内容并在 html 元素中显示
How to read xml file contents in jQuery and display in html elements?
我是Jquery的新手,我正在尝试从"sampleXML.xml"文件中读取数据,并在Html"li"元素中显示该数据。 到目前为止,我已经创建了 html 文件,如下所示:文件名-"云标签.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"链接一些外部文件。我的错误在哪里?
我想你想要这样,演示
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文件读取为数据类型:"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>');
});
}
});
});
jQuery Docs for parseXML
首先在
文件上创建,然后在数组中转换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;
您可以使用
$.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();
});
}
responseText 就是你要找的。例:
$.ajax({
...
complete: function(xhr, status) {
alert(xhr.responseText);
}
});
其中 xml 是您的文件。请记住,这将是字符串形式的xml。你可以使用 xmlparse 解析它,正如其中一些人提到的。
$.get("/folder_name/filename.xml", function (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>');
});
}
});
小提琴链接:https://jsfiddle.net/pn9xs8hf/2/
来源:使用 jQuery 读取 XML 并将其加载到 HTML 表中
相关文章:
- 如何设置html元素填充的动画
- 删除对HTML元素的拖动
- 如何使用jquery迭代具有相同属性的html元素并查找onclick事件
- 如何使用JQuery在Javascript中转换字符串中的HTML元素
- 一个html元素的克隆次数太多
- 使用AngularJS Directive WHITOUT$scope创建一个动态html元素
- 为什么我在Internet Explorer上看不到html元素
- 重新排列HTML元素的顺序并更改内容
- 使用.on动态添加jquery/js不知道的html元素
- 如果类不是一个选项,如何在使用 jQuery 时控制(避免)嵌套 html 元素的样式
- 如何将html元素添加到tampermonkey中
- 访问html元素值javascript
- 如何在HTML元素上创建函数,而不是将元素作为参数传递
- 自定义HTML元素属性未显示-Web组件
- 让HTML元素充当停止滚动的锚点
- 将html元素插入到文本字符串中,以匹配另一个html字符串
- 替换HTML元素中的字符
- 如何将html元素添加为生成的内容
- 如何使用JavaScript在没有html dom的情况下隐藏html元素
- 使用JS加载HTML元素