如何读取jQuery中的xml文件内容并显示在html元素中？ [英] How to read xml file contents in jQuery and display in html elements?
本文介绍了如何读取jQuery中的xml文件内容并显示在html元素中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是Jquery的新手。我试图读取sampleXML.xml文件中的数据并在Htmlli元素中显示该数据。到目前为止，我已经完成了，我已经创建了html文件，如下所示：文件名 - Cloudtags.html：
< ！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js> < /脚本>
< script src = Cloudtags.js>< / script>
< title> Css Globe：标签云< / title>
< link rel =stylesheettype =text / csshref =Cloudtags.css>
< script type =text / javascriptsrc =js / jquery.js>< / script>
< / head>
< body>
< div id =container>
< script type =text / javascriptsrc =http://cssglobe.com/ads/blogsponsor.js>< / script>
< div id =side>
< div class =tags>
< ul class =cld>
< li class =tag1id =java>< a href =https://www.google.com> google< / a>< / li>
< li class =tag2>< a href =＃> Chiessy< / a>< / li>
< li class =tag3>< a href =＃>网站地图< / a>< / li>
< li class =tag2>< a href =＃>销售< / a>< / li>
< li class =tag4>< a href =＃> Gohome< / a>< / li>
< li class =tag1id =temp>< a href =＃>电影< / a>< / li>
< li class =tag1>< a href =＃> It Jobz< / a>< / li>
< li class =tag5>< a href =＃> Alza< / a>< / li>
< li class =tag2>< a href =＃>海鲜食品< / a>< / li>
< li class =tag1>< a href =＃>医院< / a>< / li>
< li class =tag3>< a href =＃>智能手机< / a>< / li>
< li class =tag4>< a href =＃>比萨< / a>< / li>
< li class =tag1>< a href =＃>有氧运动< / a>< / li>
< li class =tag5>< a href =＃> Yahoo ...< / a>< / li>
< li class =tag1>< a href =＃>反病毒< / a>< / li>
< li class =tag2>< a href =＃>旅游< / a>< / li>
< / ul>
< / div>
< / div>
< div id =xmldata>< / div>
< / div>< br>
< / body>
< / html>
这是我的.js文件：
< pre $ $（document）.ready（function（）{
var nm;
$ .ajax（{
type：GET，
url：sampleXML.xml，
dataType：xml，
成功：函数（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<名称>
<年龄> 18< / age>
< / person>
< / doc>
< / code> >
但这不起作用，我是否需要将一些外部文件链接到$ .ajax。
所以，p租约告诉我我在哪里犯错。 。
提前致谢。 。
/>> 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>'）;
}）;
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":
<!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:
$(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 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 . .
解决方案 I think you want like this, 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>');
});
这篇关于如何读取jQuery中的xml文件内容并显示在html元素中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
