Question

我想用JavaScript编写一个在客户端运行的函数，但检查服务器端是否存在文件。我尝试使用Ajax。

function ROIFileExists(){
    var fileAlreadyExists=undefined;

    jQuery.ajax({
        type: "POST",
        url: "ROIFileExists.php",
        data: { FileName: fileName},
        cache: false
        }).done(function( result ) {
            fileAlreadyExists = (result!==0);
            console.log('fileAlreadyExists='+fileAlreadyExists);
    }); 

    return fileAlreadyExists;
}

问题在于，由于Ajax是异步的，因此在由Ajax块设置之前，fileAlreadyExists通常会返回（undefined）。

Answer 1

使用回调或您自己的Promise。

这是回调方法：

function ROIFileExists(callback){
// --------------------^ Accept the function to call back as an arg

    jQuery.ajax({
        type: "POST",
        url: "ROIFileExists.php",
        data: { FileName: fileName},
        cache: false
        }).done(function( result ) {
            var fileAlreadyExists = (result!==0);
            console.log('fileAlreadyExists='+fileAlreadyExists);
            callback(fileAlreadyExists);
// ---------^ Call it
    }); 
}

用法：

ROIFileExists(function(exists) {
    console.log("Exists? " + exists);
});

以下是Promise方法：

function ROIFileExists(){
    var d = new $.Deferred();                   // Create the deferred object

    jQuery.ajax({
        type: "POST",
        url: "ROIFileExists.php",
        data: { FileName: fileName},
        cache: false
        }).done(function( result ) {
            var fileAlreadyExists = (result!==0);
            console.log('fileAlreadyExists='+fileAlreadyExists);
            d.resolve(fileAlreadyExists);       // <=== Resolve it
    }); 

    return d;                                   // <=== Return it
}

用法：

ROIFileExists().done(function(exists) {
    console.log("Exists? " + exists);
});

我强烈建议不使用async: false。它会导致糟糕的用户体验，在通话过程中锁定浏览器的UI;它将在未来的jQuery版本中消失（你必须自己使用XMLHttpRequest）;如果您有类似需求但是在使用JSONP时，则无法使用async: false。

浏览器上的JavaScript代码无论如何都是事件驱动的，因此拥抱事件驱动的本质（在这种情况下，事件是你获得有关文件的信息）通常是要走的路。

Answer 2

您可以使用async: false确保您的功能返回结果。（注意：async: false不是最佳的，如果您可以更改应用程序的体系结构以支持回调，则应该避免使用，如下所示。）

function ROIFileExists(){
    var fileAlreadyExists=undefined;

    jQuery.ajax({
        async: false,   // Add this line
        type: "POST",
        url: "ROIFileExists.php",
        data: { FileName: fileName},
        cache: false
        }).done(function( result ) {
            fileAlreadyExists = (result!==0);
            console.log('fileAlreadyExists='+fileAlreadyExists);
    }); 

    return fileAlreadyExists;
}

然而最好使用回调函数。

function ROIFileExists(callback){
    jQuery.ajax({
        type: "POST",
        url: "ROIFileExists.php",
        data: { FileName: fileName},
        cache: false
        }).done(function( result ) {
            callback(result!==0);
       });
}

检查JavaScript中是否存在服务器端文件

2 个答案: