描述下遇到的情况:
正常执行完ajax,会进入error方法体,并且弹窗没有正确关闭
奇葩的是,在ajax外加上不存在的方法,虽然网页控制台会js报错,但是却进入了success的方法体,弹窗正确关闭,但是页面没有刷新
看下代码:
console.log("确认选中文件,上传中...");
var formData = new FormData();
formData.append('file',vm.uploadFileInfo.file);
formData.append('relatedType',vm.uploadFileInfo.relatedType);
formData.append('relatedId',vm.uploadFileInfo.relatedId);
//主要看ajax
//将file保存到formData中,调用controller的upload方法进行上传到服务器
//想要上传完之后进入success,然后打印上传成功,然后刷新list页面
//(本js是edit.js,父级是list.html页面)
$.ajax({
url : '../../public/uploadFile/upload?_' + $.now(),
type : "post",
processData : false,//告诉jQuery不要去处理发送的数据
contentType : false,//告诉jQuery不要去设置Content-Type请求头
data :formData,
success: function(data) { //事与愿违,并没有执行success
console.log("更新文件成功:1");
$.currentIframe().vm.load();
},
error: function(data){
//进入到了error,成功打印出信息,也刷新了list,
//但是edit的弹窗页面和询问框没有正确关闭
console.log("更新文件成功:0");
$.currentIframe().vm.load();
}
});
//更神奇的是,如果加一个不存在的方法,网页控制台会报错没有此方法,但是它就会进入ajax的success方法体了!比如:
vm.load();//此方法并没有定义,在此js中也不能使用,我是因为想刷新list页面,误加上去的
于是上网查阅了大量的案例,通过这个方法,看到了错误信息
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);//返回0
alert(XMLHttpRequest.readyState);
alert(textStatus);//error
},
尝试的过程中发现,error的时候给他alert()一下就好了,正确执行。
最后尝试出了正确的写法
解决方案:
给ajax加上:async:false
async:true 意思是异步方式,$.ajax执行后,会继续执行ajax后面的脚本,直到服务器端返回数据后,触发$.ajax里的success方法,这时候执行的是两个线程。
async:false 意思是所有的请求均为同步请求,在没有返回值之前,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
成功运行的代码:
console.log("确认选中文件,上传中...");
var formData = new FormData();
formData.append('file',vm.uploadFileInfo.file);
formData.append('relatedType',vm.uploadFileInfo.relatedType);
formData.append('relatedId',vm.uploadFileInfo.relatedId);
$.ajax({
url : '../../public/uploadFile/upload?_' + $.now(),
type : "post",
processData : false,//告诉jQuery不要去处理发送的数据
contentType : false,//告诉jQuery不要去设置Content-Type请求头
data :formData,
async:false,
success: function(data) {
console.log("更新文件成功!");
$.currentIframe().vm.load();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
//观察错误信息
//console.log(XMLHttpRequest.status);
//console.log(XMLHttpRequest.readyState);
//console.log(textStatus);
$.currentIframe().vm.load();
}
});