如何使用JQUERY AJAX和HTML每30秒从XML读取和显示数据

问题描述 投票:0回答:1

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

我需要每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文件:

<!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>

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

javascript jquery html ajax xml
1个回答
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();
© www.soinside.com 2019 - 2024. All rights reserved.