Question

我最近在去W3schools之后开始使用ajax方法，并且我试图在我看到的视频中实现这些教导。该视频是： http://www.bing.com/videos/search?q=ajax+read+xml+file+example&view=detail&mid=815376B884B91D80047D815376B884B91D80047D&first=0&FORM=NVPFVR

我已完成编码并将文件放在Wamp的www页面中。我打开本地主机并尝试在xml文件中加载数据，但是没有数据加载到我为ajax加载过程保持为空的<ul>标记中。

以下是我将网站命名为Website.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" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="wrapper">
<div class="central_contents">
<div class="header"></div>
<div class="main">

<ul>
</ul>

</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script type="text/javascript" src="MyJquery.js"></script>
</body>
</html>

我命名为Myjquery.js的jquery文件：

$(document).ready(function(){
corporateData();                           
//You must also set the time interval in which ajax reloads the page.
fetch();
});


function fetch(){   //this is a function that will update data in the site using ajax
setTimeout(function(){
                    corporateData();
                    fetch();  /*this is the neat part. the function is used to refresh the data and it calls itself after
                    a thousand milliseconds (after every second). So the page will keep on refreshing after every
                    1 second always
                    */
                    },1000);    
}


function corporateData(){

$.ajax({
                    url: "corporateData.xml",
                    dataType: "xml",
                    success: function(data){
                    $("ul").children.remove();
                    $(data).find("employee").each(function(){                      /*.each here means we must do this for each employee in the xml file*/
                        var info='<li>Name: '+$(this).find("name").text()+'</li><li>Age: '+$(this).find("age").text()+'</li><li>Company: '+$(this).find("company").text()+'</li>';
                        $(ul).append(info);                                          
                     });      //.each() end

           }

});   //$.ajax end

} //corporateData() end

这是XML文件

<?xml version="1.0" encoding="utf-8"?>
<corporate>
<employee>
    <name>Ahmed</name>
    <age>20</age>
    <company>Yellowcorp</company>
</employee>
</corporate>

我想要实现的目标：我只想将xml文件中的数据读入我放在HTML文件中的空<ul>标记。我在当地的wamp主机上运行它们，到目前为止没有结果

Answer 1

好吧，如果它不起作用，请先从删除一些复杂性开始。让我们从删除setTimeout复杂性开始。

`顺便说一句，如果你想要一次多个访问者一次这样做，那么第二次看起来似乎是削弱你的服务器的好方法'

试试看看你可能会遇到什么错误。也可以使用浏览器调试器运行它。您可以设置断点并查看变量，然后查看发生的情况。

$(document).ready(function(){
    getXMLFile();                           
});


function getXMLFile(){

    $.ajax({
            type: "GET",
            url: "corporateData.xml",
            dataType: "xml",
            error: function(jqXHR, textStatus, errorThrown) {
               alert('getXMLFile failed with ' + textStatus);
            },
            success: function(data, status){
                alert( 'getXMLFile status = ' + status );
                // did I get data returned
                alert( 'getXMLFile data = ' + data );
                $("ul").children.remove();
                $(data).find("employee").each(function() {
                    var info = '<li>Name: ' + $(this).find("name").text() + 
                               '</li><li>Age: ' + $(this).find("age").text() + 
                                '</li><li>Company: ' + $(this).find("company").text() + '</li>';
                    $(ul).append(info);                                          
                 });
       }

    });   //$.ajax end

} //end getXMLFile

Xml文件内容未显示在Wamp的列表中

1 个答案: