情况:
有个页面a,填写表单,保存按钮
页面a引a.js,生命要触发的保存事件
前端框架:与后台交互方式:ajax,统一放在common.js中,common页面引common.js
a页面引common页面
如下图:
问题:
页面表单填写完,点解保存触发save(),想做两件事
1、给个提示框
2、调ajax调后台
3、给另一个提示框
a.js
var result = HAMain.fileAndFormSubmit(JSON.stringify(data),HAMain.getSaveLetterManageUrl());
//状态变更成功
if(result){
messageSuccess();
$(".msgText").html("信息补录成功!");
setTimeout(function(){HAMain.getListOfLetterManage()},1000);
}
common.js
HAMain.fileAndFormSubmit = function (datas,url) {
var callResult = false;
var form = new FormData();
form.append("file", document.getElementById("file").files[0]);
form.append("dataParam",datas);
if(callResult == false){
$(document.body).append('<div class="mask1"></div><div class="msg msgText2"></div>');
$(".msgText").html("正在上传文件,请稍后!");
}
$.ajax({
url: url, //后台url
data: form,
cache: false,
async: false,
type: "POST", //类型,POST或者GET
dataType: 'json', //数据返回类型,可以是xml、json等
processData: false,
contentType: false,
success: function (data) { //成功,回调函数
console.log(">>>>>in fileAndFormSubmit,result=" + JSON.stringify(data));
if (data.responseCode === HACommon.RESPONSE_SUCCESS_CODE) {
callResult = true;
}
}
});
if(callResult){
$(document.body).find(".mask1,.msg").remove();
}
return callResult;
}
就是上来先来个弹框,后天执行成功了,再来个弹框
现在是第一个提示框说啥出不来,第二个正常弹
解答:
前端说是js执行顺序问题
因为打个alert在
.
a
j
a
x
前
,
就
能
显
示
.ajax前,就能显示
.ajax前,就能显示(".msgText").html(“正在上传文件,请稍后!”);这个弹框
目前ajax的async属性设置的false,也就是同步请求,
将async改为true,异步请求,$(".msgText").html(“正在上传文件,请稍后!”);这个弹框就能显示,
但是return 和ajax异步了,callResult那不多ajax执行成功回调函数结果了
所以,处理如下:
1、去掉 async: false,ajax用默认异步请求
2、两个弹框都放success回调函数中
HAMain.fileAndFormSubmit = function (datas,url) {
var form = new FormData();
form.append("file", document.getElementById("file").files[0]);
form.append("dataParam",datas);
$("body").append('<div class="mask1"></div><div class="msg msgText"></div>');
$(".msgText").html("正在上传文件,请稍后!");
$.ajax({
url: url, //后台url
data: form,
type: "POST", //类型,POST或者GET
dataType: 'json', //数据返回类型,可以是xml、json等
processData: false,
contentType: false,
success: function (data) { //成功,回调函数
console.log(">>>>>in fileAndFormSubmit,result=" + JSON.stringify(data));
if (data.responseCode === HACommon.RESPONSE_SUCCESS_CODE) {
$(document.body).find(".mask1,.msg").remove();
//状态变更成功
messageSuccess();
$(".msgText").html("信息补录成功!");
//刷回列表页
setTimeout(function(){HAMain.getListOfLetterManage()},300);
}
}
});
}
就可以了。。