/. event response refresh: refresh only when there is a request
1. Get HTML elements through JS HTML DOM or jQuery, listen for page events through DOM or jQuery, and get user requests;
2. Submit the user request to the server through Ajax, and the server will return the result after processing, and then Ajax will receive the data;
3. Load the data into the page through DOM method or jQuery method, and refresh the event response.
$('#input_date').keypress(function(e){
if(e.keyCode=='13'){
$.ajax({
type: "POST",
url: "inquire_date.php",
data: {
birth:null,
//1.Get the user request (i.e. some events) and send it to the server for processing
date:$('#input_date input').val()
},
dataType: "json",
//2.Get data from server
success: function(data){
if (data.success) {
var festival = data.fetivalInquireResult;
//3.Load the acquired data into the page to refresh the page event response
$('#show_festival').text(festival);
} else {
$('#show_festival').text("Failed to get Festival");
}
},
error: function(jqXHR){
alert("An error occurred:" + jqXHR.status);
},
});
$('#festival').hide();
$('#response_festival').show();
}
});
/. local auto refresh: the local page will be refreshed automatically if no request is made
1. Use timer functions such as setTimeout() to get Ajax data from the server at regular intervals;
2. Load the data into the page by DOM method or jQuery method to realize the local automatic refresh of the page.
$(document).ready(function(e){ setTimeout('updateShow()',0); }); /*Local auto refresh page data*/ function updateShow(){ $.ajax({ type: "GET", url: "inquire_date.php?data=" + "inquire", dataType: "json", //1.Get data from server by timer success: function(data) { if (data.success) { var agesFormat = data.agesFormat; var daysFormat = data.daysFormat; //2.Load the data into the page to realize automatic refresh $('#ages').text(agesFormat); $('#days').text(daysFormat); } else{ alert("Failed to get data"); } }, error: function(jqXHR){ alert("An error occurred:" + jqXHR.status); }, }); setTimeout('updateShow()',500); }