事件回應刷新:有請求才會刷新
1、透過JS HTML DOM或jQuery取得HTML元素,透過DOM方法或jQuery方法監聽頁面事件,取得使用者請求;
2.透過Ajax將使用者請求提交至伺服器,伺服器處理後回傳結果,再由Ajax接收資料;
3.透過DOM方法或jQuery方法將資料載入頁面,事件回應刷新完成。
$('#input_date').keypress(function(e){ if(e.keyCode=='13'){ $.ajax({ type: POST, url: inquire_date.php, data: { birth:null,/ /1.取得使用者請求(即某些事件),傳送至伺服器處理date:$('#input_date input').val() }, dataType: json,//2.從伺服器取得資料success: function(data){ if (data.success) { var festival = data.fetivalInquireResult;//3.將取得的資料載入頁面,實現頁面事件回應刷新$( '#show_festival').text(festival); } else { $('#show_festival').text(取得節日失敗); } }, error: function(jqXHR){ alert(發生錯誤: + jqXHR.status); }, }); $('#festival').hide(); $('#response_festival').show(); }});
局部自動刷新:沒有請求局部頁面也會自動刷新
1.透過定時器函數如setTimeout(),讓Ajax每隔一段時間從伺服器取得資料;
2.透過DOM方法或jQuery方法將資料載入頁面,實現頁面局部自動刷新。
$(document).ready(function(e){ setTimeout('updateShow()',0);});/*局部自動刷新頁面資料*/function updateShow(){ $.ajax({ type: GET, url : inquire_date.php?data= + inquire, dataType: json,//1.透過定時器定時從伺服器取得資料success: function(data) { if (data.success) { var agesFormat = data.agesFormat; var daysFormat = data.daysFormat;//2.將資料載入頁面,實作自動刷新$('#ages').text(agesFormat ); $('#days').text(daysFormat); } else{ alert(取得資料失敗); } }, error: function(jqXHR){ alert(發生錯誤: + jqXHR.status); }, }); setTimeout('updateShow()',500);}
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。