知道javascript中另一个函数调用ajax的结果
问题描述:
我有一个函数uploadFunction,它通过使用JQuery ajax调用的Rest web服务将文件上载到我的服务器上。 我使用这种方法也用于另一个功能,我需要知道Web服务调用的结果,以创建一个或更少的一行与上载的文件的名称。
实际的方法与变量不起作用,有没有办法知道文件是否正确上传? 我尝试使用async:false(因为我反正等待上传),但是我的等待模式出现,上传结束,而不是立即。知道javascript中另一个函数调用ajax的结果
function uploadFunction(fileType){
//CSRF attribute for spring security
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
var formData = new FormData();
var fileControl = document.getElementById(fileType);
var length = fileControl.files.length;
for(var i = 0; i< length; i++){
formData.append('file[]',fileControl.files[i]);
}
formData.append('idFleet', selectedFleet);
formData.append('idCar', $("#selectedCar").val());
if(fileType!='dat')
formData.append('initialKm', 0);
else
formData.append('initialKm', $("#initialKm").val());
jQuery.ajax({
url : 'upload',
type: 'POST',
contentType: false,
processData: false,
data:formData,
beforeSend:function(xhr) {
xhr.setRequestHeader(header, token);
waitingModal.showPleaseWait();
},
success: function(data,status,xhr){
//No exception occurred
if (data.status){
//Also the field are right(for e.g. form value)
if(data.success){
//Store information if file is datatable
if (fileType=='datatable')
$("#datatablePath").val(data.result[0]);
notifyMessage(fileType + " has been uploaded!", 'success');
uploadResult=true;
}
else{
//code if there are some error into form for example
}
} else {
notifyMessage(data.result, 'error');
$('#acquisitionWizard').bootstrapWizard('show',2);//show
uploadResult=false;
}
},
error: function(xhr,status,e){
window.location.href = "/ATS/500";
}
}).complete(function() {
//add timeout because otherwise user could see a too fast waiting modal
setTimeout(function(){
waitingModal.hidePleaseWait();
}, 1000);
});
}
我的函数调用uploadFunction是这样的:
$(function() {
$("#addDatButton").click(
function() {
var fileControl = document.getElementById('dat');
if (fileControl.files.length!=0 && $('#initialKm').val().length == 0){
notifyMessage("You have to add initial Km!", 'info');
}else if (fileControl.files.length==0 && $('#initialKm').val().length != 0){
notifyMessage("You have to add dat file!", 'info');
}else if (fileControl.files.length==0 && $('#initialKm').val().length == 0){
notifyMessage("You have to add dat file and initial Km!", 'info');
}else{
uploadFunction('dat');
if (uploadResult){
datUpload=true;
var fileName=document.getElementById('datName').value;
var fileUploadHTML='<div class="row"> <div class="col-xs-4"><div class="form-group has-success"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-upload" style="color: green"></i></span> <input type="text" class="form-control" readonly="readonly" placeholder="'+fileName+'"></div></div></div><div>';
$("#fileUploadSuccess").append(fileUploadHTML);
document.getElementById("initialKm").value = '';
document.getElementById("dat").value = '';
document.getElementById("datName").value = '';
}
}
});
});
答
使用的承诺。刚刚从uploadResult()
返回阿贾克斯承诺(它的返回值),并添加一个.then
或.done
调用中的后续代码:
例如
function uploadFunction(fileType){
[snip]
return jQuery.ajax({
,并使用这样的:
uploadFunction('dat').then(function(uploadResult){
if (uploadResult){
[snip]
}
});
切勿使用async: false
。它阻止浏览器进行其他处理。始终使用异步操作。
干净清晰! – sander
更不用说'async:false'已被弃用,并且在不久的将来可能会崩溃,而且浏览器已经通过警告来控制不使用它 – charlietfl
@charlietfl:我没有注意到它已从1.8弃用。这是好消息:) –