Ajax回退刷新页面问题的解决办法

2019-09-14 06:57:26于丽

title:标题(现在是被忽略,未作处理)。

url:要跳转到的URL地址,不能跨域。

addEventListener(type, listener)
addEventListener是一个侦听事件并处理相应的函数。

type:事件的类型。

listener:侦听到事件后处理事件的函数。此函数必须接受 Event对象作为其唯一的参数,并且不能返回任何结果。

解决方法

由于AJAX无刷新改变页面内容的,所以页面的URL始终是不变的,为了区分页面上的各个不同内容,首先需要重新定义一下各个页面的URL,因为RMS网站多使用$.post异步请求,我们可以用URL记录post请求的各个参数(请求地址、传递参数),当浏览器进行刷新、回退操作时,根据URL记录的信息自动发送post请求,进入对应页面,从而实现希望的功能。

定义URL语法:

已如下地址为例:

“http://localhost/rms_hold/index.php/Home/Index/loadHomePage#/rms_hold/index.php/Home/ResourceRequest/getRequestPage@apply_type=1&resource_name=ADM_BIZCARD!1”

“http://localhost/rms_hold/index.php/Home/Index/loadHomePage”是原先页面的URL,如果在问题解决之前在RMS网站上进行任何点按操作,网址一直不会有任何变动。现在我们使用“#”分割网址,“#”之后就是我们所记录的ajax请求“/rms_hold/index.php/Home/ResourceRequest/getRequestPage”是请求的地址,它由“#”与“@”分割,而在“@”与“!”之间的这是发向请求地址的各个参数,“apply_type=1”与“resource_name=ADM_BIZCARD”由“&”进行分割。

刷新、回退监听处理:

if (history.pushState) {
window.addEventListener("popstate", function() {
back_ajax_mod_url();
back_ajax_post();
if(location.href.indexOf("#")==-1){
window.location.reload();
}
});
back_ajax_mod_url();
back_ajax_post();
}

如以上代码所示,window对象上提供了onpopstate事件,可以使用addEventListener方法监听onpopstate事件,每当URL因为浏览器回退时都会对得到的URL在back_ajax_mod_url()与back_ajax_post()函数中进行解析、处理,而当浏览器刷新时,根据history.pushState的返回值不空,依然会对得到的URL在back_ajax_mod_url()与back_ajax_post()函数中进行解析、处理。

对外接口:

function back_ajax_mod_url(){
var url_ajax=ajaxback_url.pop();
var title ="Home | UniqueSoft RMS";
if(url_ajax){
history.pushState({ title: title }, title,location.href.split("#")[0] + "#"+ url_ajax);
}
}

介绍一下back_ajax_mod_url()函数,它与数组ajaxback_url组成对外接口,ajaxback_url是一个全局数组,用来存放需要加入到history中的URL,然后由back_ajax_mod_url()函数在无页面刷新的情况下将当前URL和history.state加入到history中。

$("#reportTable tbody").on("click", "trtd img[alt = 'Detail']",
function() {
var id = $(this).attr("business_leave_id");
$.post("__MODULE__/ReportCenter/getReportDetailPage",{
"report_name": "ADM_TRAVEL_REP",
"item_id": id,
},
function(data) {
ajaxback_url.push("__MODULE__/ReportCenter/getReportDetailPage"+ "@" + "item_id=" + id + "&" +"report_name=ADM_TRAVEL_REP");
$("#container").html(data);
back_ajax_mod_url();
});
});