頁面無重新整理切換實現

木叔發表於2017-10-25

說明：針對有些後臺為了實現不重新整理固定資源，如選單，會需要區域性切換重新整理頁面，實現方式如下：

 

方式一：

$.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 物件

 

相關文章