0

最近、W3schools に通ってから ajax メソッドを使い始め、見たビデオで教えを実装しようとしました。ビデオは次のとおりです 。

コーディングを行い、ファイルを Wamp の www ページに配置しました。ローカル ホストを開き、xml ファイルにデータをロードしようとしましたが<ul>、ajax ロード プロセス用に空のままにしたタグにデータがロードされません。

ここに、私が Website.html という名前の Web サイトのコードを示します。

    <!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 ファイルに入れた空のタグに読み込みたいだけです。私はそれらをワンプのローカルホストで実行しましたが、これまでのところ結果はありません

4

1 に答える 1