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

Question

如果有人在这方面帮助我，我是初学者会很棒。

我需要每 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 秒获取一次而不刷新页面。

Answer 1

在您的 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();