HTML頁面局部刷新


/.事件響應刷新:有請求才會刷新

1、通過JS HTML DOMjQuery獲取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);

}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM