How to read and display data from XML for every 30 seconds using JQUERY AJAX and HTML
Question
I am a beginner would be great if someone help me on this.
I need to read and display data (HTML / PHP page) from XML for every 30 seconds.
XML FILE :
<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>
Here is my HTML File :
<!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>
I wanted to fetch specific details from the XML file and display it in the html page. Also another thing is I need to fetch this for every 30 seconds without refreshing the page.
1 answers
solution1
3 ACCPTED 2018-02-20 13:10:05
In your ajax request you specified that the data will be xml, in which case you will get back an xml document in your success handler, therefore do not call $.parseXML .
Getting the data every 30 seconds is just a matter of calling setTimer or setTimeout setting the timeout to 30 seconds
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();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.