1. 程式人生 > >頁面無刷新切換實現

頁面無刷新切換實現

替換 att 返回 .ajax www. ava 面包屑 web lis

說明:針對有些後臺為了實現不刷新固定資源,如菜單,會需要局部切換刷新頁面,實現方式如下:

方式一:

$.ajax({
	type: ‘post‘,
	url: webRoot+url,
	dataType: ‘html‘,
	success: function(data){
		$(‘.page-title‘).html($(obj).find(‘.title‘).text());//頁面頂部標題更新
		$(‘.content-header‘).html(header);//面包屑更新
		$(‘.content-panel‘).html(data);//主內容替換
	}
});

註:ajax請求類型為html時,整個頁面會作為數據放到data中,可供js操作放到指定的元素中。

方式二:

$("#body-main-content").load(url, paramedata, function(data, status){
        //if(status=="error"){
        //    $("#body-main-content").html(data);//錯誤提示直接放到頁面
        //    return false;
        //}
        //給頁面設置標題描述等信息
	assignPageAttr();
});

註:

load() 方法通過 AJAX 請求從服務器加載數據,並把返回的數據放置到指定的元素中。

註釋:還存在一個名為 load 的 jQuery 事件方法。調用哪個,取決於參數。

語法

load(url,data,function(response,status,xhr))
參數描述
url 規定要將請求發送到哪個 URL。
data 可選。規定連同請求發送到服務器的數據。
function(response,status,xhr)

可選。規定當請求完成時運行的函數。

額外的參數:

  • response - 包含來自請求的結果數據
  • status - 包含請求的狀態("success", "notmodified", "error", "timeout" 或 "parsererror")
  • xhr - 包含 XMLHttpRequest 對象

頁面無刷新切換實現