如何使用JQUERY AJAX和HTML

时间:2018-02-20 13:05:26

标签: javascript jquery html ajax xml

如果有人帮助我,我是一个初学者会很棒。

我需要每30秒从XML读取和显示数据(HTML / PHP页面)。

XML文件:

<MAINData>
  <LiveData>
   <Field no="1">ENG ODI</Field>
   <Field no="2">ENG</Field>
   <Field no="3">IND ODI</Field>
   <Field no="4">IND</Field>
   <Field no="5">STRAUSS</Field>
   <Field no="6">PIETERSEN</Field>
   <Field no="7">TROTT</Field>
   <Field no="8">BELL</Field>
   <Field no="9">COLLINGWOOD</Field>
   <Field no="10">PRIOR</Field>
   <Field no="11">YARDY</Field>
   <Field no="12">BRESNAN</Field>
   <Field no="13">SWANN</Field>
   <Field no="14">SHAHZAD</Field>
   <Field no="15">ANDERSON</Field>
   <Field no="16">LBW B KHAN</Field>
   <Field no="17">C AND B PATEL</Field>
   <Field no="18">LBW B CHAWLA</Field>
   <Field no="19">C KOHLI B KHAN</Field>
  </LiveData>
</MAINData>

这是我的HTML文件:

&#13;
&#13;
<!DOCTYPE html>

<html lang="en">
<head>
    

<script
  src="http://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
  
<script type="text/javascript">


  $.ajax({
    type: "GET",
    url: "LiveData.xml",
    dataType: "xml",
    success: function (xml) {
        var xmlDoc = $.parseXML(xml),
            $xml = $(xmlDoc);
            $xml.find('Field[no="1"]').each(function () {
            $("#news-container").append($(this).text() + "<br />");
            
        }
        );
    }
});



  
</script>
</head>
 

<body>
	
  <div class="wrap" id="news-container">
      
      
  </div>
  
 
</body>
</html>
&#13;
&#13;
&#13;

我想从XML文件中获取特定详细信息并将其显示在html页面中。另外一件事是我需要每30秒获取一次而不刷新页面。

1 个答案:

答案 0 :(得分:3)

在您的ajax请求中,您指定数据为xml,在这种情况下,您将在成功处理程序中返回xml文档,因此不要调用$.parseXML
每30秒获取一次数据只需调用setTimer或setTimeout将超时设置为30秒

function getData(){
  $.ajax({
    type: "GET",
    url: "LiveData.xml",
    dataType: "xml",
    success: function (xml) {
            $xml = $(xml);
            $xml.find('Field[no="1"]').each(function () {
              $("#news-container").append($(this).text() + "<br />");

            });
    },
    complete: function(){
        setTimeout(getData, 30000);
    }
  });
}

getData();