firefox和chrome中 JQuery的ajax组件执行差异-优快云博客

本文探讨了一项具体的前端开发挑战：一个POST请求在Chrome中正常运行但在Firefox中失败的问题。通过分析发现，问题根源在于Firefox将AJAX请求视为后台进程处理。文章最终提供了解决方案：确保所有相关逻辑都在AJAX请求内部执行。

2019独角兽企业重金招聘Python工程师标准>>>

最近做项目,发现了一个有意思的问题,自己解决不了,然后找别人一块想,已解决; 问题为:一个post请求,在chrome正常执行;在firefox中无法执行(不报错,只是请求失败,后台接受不到); 原代码如下:

function addCustom(o) {
	var qy = o[0]["value"];// regionId
	qy = qy.replace(" ", "");
	var glxs = o[1]["value"];//
	var km_ratio = o[2]["value"];
	if (km_ratio == "") {
		alert("请设置扣罚系数");
		return;
	} else if (qy == "") {
		alert("请设置扣罚区域");
		return;
	}
	if (jQuery.inArray(qy, regionArr) > -1) {
		alert("请勿重复添加自定义区域!");
	} else if (qy.length > 5 && qy.length < 8) {
		var num = (qy + "").substring(4);
		if (num != '00') {
			oilForm(km_ratio, qy);// 执行添加
		} else {
			alert("请选择县级区域!!");
		}
	} else {
		alert("请选择县级区域!!");		
	}
       location.href = '/monthTask/punish';
}
/*
* 添加自定义扣罚系数区域
*/
function oilForm(km_ratio, qy) {
	var newPunish = {
		"regionId" : qy,
		"rate" : km_ratio
	}
	// 发送请求
	$.ajax({
		url : 'monthTask/punish',// 添加公里系数设置区域
		type : 'post',
		data : newPunish,
		dataType : "json",
		success : function(result) {
			alert("已成功添加");
			location.href = '/monthTask/punish';
		},
		error : function(data) {
			if (500 == data.status) {
				alert("系统异常，请稍后重试！");
			} else {
				location.href = '/monthTask/punish';
			}
		}
	});

}

分析:当执行addCustom方法,并执行到oilForm方法时,oilForm执行ajax方法,firefox没有等到ajax请求执行完,就执行了页面跳转操作;
相关原理:chrome将ajax作为一般进程处理,而firefox将ajax作为后台进程(daemon Thread)处理;
解决方案:在ajax请求之后不要进行其他的业务操作;将所有的相关逻辑都写进ajax里; 修改后的addCustom方法

function addCustom(o) {
	var qy = o[0]["value"];// regionId
	qy = qy.replace(" ", "");
	var glxs = o[1]["value"];//
	var km_ratio = o[2]["value"];
	if (km_ratio == "") {
		alert("请设置扣罚系数");
		return;
	} else if (qy == "") {
		alert("请设置扣罚区域");
		return;
	}
	if (jQuery.inArray(qy, regionArr) > -1) {
		alert("请勿重复添加自定义区域!");
	} else if (qy.length > 5 && qy.length < 8) {
		var num = (qy + "").substring(4);
		if (num != '00') {
			oilForm(km_ratio, qy);// 执行添加
		} else {
			alert("请选择县级区域!!");
			location.href = '/monthTask/punish';
		}
	} else {
		alert("请选择县级区域!!");
		location.href = '/monthTask/punish';
	}

}

现在,当方法中执行到ajax请求时,其后面没有任何逻辑操作;问题就解决了.

转载于:https://my.oschina.net/u/1590027/blog/689686