javascript - 如何在jQuery中读取xml文件内容并显示在html元素中?

标签 javascript jquery 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>

这是我的 .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>');

});

关于javascript - 如何在jQuery中读取xml文件内容并显示在html元素中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19220873/

相关文章:

javascript - 使用 AJAX 捕获 Node JS 路由的响应并将其显示在 HTML 上

jquery - 如何在 div 元素中垂直和水平居中文本

html - CSS:在 IE 6/7 中出现圆 Angular 对齐问题,但在 IE8/Firefox 等中正常

javascript - 在 JavaScript 中引用操作字段

javascript - k6 测试仅同时执行 "http"请求并连续执行 websocket 请求

javascript - 如果负数或正数如何更改数字的颜色?

javascript - 参数无法在 Angular 模态中解析

asp.net - 使用 jQuery Ajax 将参数传递给 WebMethod

html - 将跨度内的背景图像与显示为表格单元格对齐

javascript - 在 Javascript 中获取相邻元素的 ID