頁面無刷新切換實現

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

 

方式一：

$.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 對象