HTML頁面局部刷新的實(shí)現(xiàn)代碼

來源：本站原創(chuàng)|時(shí)間：2020-01-10|欄目：CSS/HTML|點(diǎn)擊：次

事件響應(yīng)刷新：有請求才會(huì)刷新

1、通過JS HTML DOM或jQuery獲取HTML元素，通過DOM方法或jQuery方法監(jiān)聽頁面事件，獲取用戶請求；

2、通過Ajax將用戶請求提交至服務(wù)器，服務(wù)器處理后返回結(jié)果，再由Ajax接收數(shù)據(jù)；

3、通過DOM方法或jQuery方法將數(shù)據(jù)載入頁面，事件響應(yīng)刷新完成。

$('#input_date').keypress(function(e){

　　if(e.keyCode=='13'){

　　　　$.ajax({

　　　　　　type: "POST",

　　　　　　url: "inquire_date.php",

　　　　　　data: {

　　　　　　　　birth:null,

//1.獲取用戶請求（即某些事件），發(fā)送到服務(wù)器處理

　　　　　　　　date:$('#input_date input').val()

　　　　　　},

　　　　　　dataType: "json",

//2.從服務(wù)器獲取數(shù)據(jù)

　　　　　　success: function(data){

　　　　　　　　if (data.success) {

　　　　　　　　　　var festival = data.fetivalInquireResult;

//3.將獲取的數(shù)據(jù)載入頁面，實(shí)現(xiàn)頁面事件響應(yīng)刷新

　　　　　　　　　　$('#show_festival').text(festival);

　　　　　　　　} else {

　　　　　　　　　　$('#show_festival').text("獲取節(jié)日失敗");

　　　　　　　　}  

　　　　　　},

　　　　　　error: function(jqXHR){     

  　　　　　　alert("發(fā)生錯(cuò)誤：" + jqXHR.status);  
　　　　　　},     

　　　　});

　　$('#festival').hide();

　　$('#response_festival').show();

　　}

});

局部自動(dòng)刷新：沒有請求局部頁面也會(huì)自動(dòng)刷新

1、通過定時(shí)器函數(shù)如setTimeout(),讓Ajax每隔一段時(shí)間從服務(wù)器獲取數(shù)據(jù)；

2、通過DOM方法或jQuery方法將數(shù)據(jù)載入頁面，實(shí)現(xiàn)頁面局部自動(dòng)刷新。

$(document).ready(function(e){

    setTimeout('updateShow()',0);

});

/*局部自動(dòng)刷新頁面數(shù)據(jù)*/

function updateShow(){

　　$.ajax({

　　　　type: "GET",

　　　　url: "inquire_date.php?data=" + "inquire",

　　　　dataType: "json",

//1.通過定時(shí)器定時(shí)從服務(wù)器獲取數(shù)據(jù)

　　　　success: function(data) {

　　　　　　if (data.success) {

　　　　　　　　var agesFormat = data.agesFormat;

　　　　　　　　var daysFormat = data.daysFormat;

//2.將數(shù)據(jù)載入頁面，實(shí)現(xiàn)自動(dòng)刷新

　　　　　　　　$('#ages').text(agesFormat);

　　　　　　　  $('#days').text(daysFormat);

　　　　　　} else{

　　　　　　　　alert("獲取數(shù)據(jù)失敗");

　　　　　　}

　　　　},

　　　　error: function(jqXHR){     

  　　　　alert("發(fā)生錯(cuò)誤：" + jqXHR.status);  

　　　　},

　　});

　　setTimeout('updateShow()',500);

}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。

上一篇：HTML實(shí)現(xiàn)雙11搶劵(設(shè)定時(shí)間打開搶券的頁面)

欄目：CSS/HTML

下一篇：html文本溢出顯示省略字符的兩種常用解決方法

本文標(biāo)題：HTML頁面局部刷新的實(shí)現(xiàn)代碼

本文地址：http://www.jygsgssxh.com/a1/CSS_HTML/9518.html

更多CSS/HTML

雷火电竞-中国电竞赛事及体育赛事平台

CSS/HTML

HTML頁面局部刷新的實(shí)現(xiàn)代碼

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀