页面无刷新切换实现

Posted 2020-10-11 leskang

说明：针对有些后台为了实现不刷新固定资源，如菜单，会需要局部切换刷新页面，实现方式如下：

 

方式一：

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