Event response refresh: refresh only when requested
1. Obtain HTML elements through JS HTML DOM or jQuery, monitor page events through DOM methods or jQuery methods, and obtain user requests;
2. Submit the user request to the server through Ajax, the server returns the result after processing, and then Ajax receives the data;
3. Load data into the page through the DOM method or jQuery method, and the event response refresh is completed.
$('#input_date').keypress(function(e){ if(e.keyCode=='13'){ $.ajax({ type: POST, url: inquire_date.php, data: { birth:null,/ /1. Get user requests (i.e. certain events) and send them to the server for processing date:$('#input_date input').val() }, dataType: json,//2. Get data from the server success: function(data){ if (data.success) { var festival = data.fetivalInquireResult;//3. Load the obtained data into the page to implement page event response refresh $('#show_festival').text(festival); } else { $('#show_festival').text(Failed to get festival); } }, error: function(jqXHR){ alert(Error occurred: + jqXHR.status); }, }); $('#festival').hide(); $('#response_festival').show(); }});Partial automatic refresh: partial pages will be automatically refreshed without request
1. Use timer functions such as setTimeout() to let Ajax obtain data from the server at regular intervals;
2. Load data into the page through the DOM method or jQuery method to achieve partial automatic refresh of the page.
$(document).ready(function(e){ setTimeout('updateShow()',0);});/*Partially automatically refresh page data*/function updateShow(){ $.ajax({ type: GET, url : inquire_date.php?data= + inquire, dataType: json,//1. Get data from the server regularly through a timer success: function(data) { if (data.success) { var agesFormat = data.agesFormat; var daysFormat = data.daysFormat;//2. Load data into the page to achieve automatic refresh $('#ages').text(agesFormat); $('#days').text(daysFormat ); } else{ alert(Failed to obtain data); } }, error: function(jqXHR){ alert(Error occurred: + jqXHR.status); }, }); setTimeout('updateShow()',500);}The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.