0

我最近在去 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 文件中，但没有数据加载到<ul>我为 ajax 加载过程保持为空的标记中。

这是我命名为 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 文件中的数据读入<ul>我放在 HTML 文件中的空标签中。我在本地的 wamp 主机上运行它们，到目前为止还没有结果

4

1 回答 1

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
于 2013-07-15T09:23:54.050 回答