知道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。它阻止浏览器进行其他处理。始终使用异步操作。

+0

干净清晰! – sander

+0

更不用说'async:false'已被弃用,并且在不久的将来可能会崩溃,而且浏览器已经通过警告来控制不使用它 – charlietfl

+0

@charlietfl:我没有注意到它已从1.8弃用。这是好消息:) –