ajax执行完之后进入error方法体,error方法体内加上alert却又可以运行

描述下遇到的情况:

正常执行完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();
    }
});

猜你喜欢

转载自blog.csdn.net/qq_34075464/article/details/83898017