javascript - jQuery 表单插件的 beforeSubmit 调用的函数没有返回值

Question

我的 jQuery Form 插件中的 beforeSubmit 函数需要检查所选文件是否已存在于服务器上。这是相关代码:

$('#frmSermonUpload').ajaxForm({
    beforeSubmit: function() {
        // Reset errors and clear messages
        ClearForm(false);
        var formValid = true,
            fileExists = CheckFileExists();

        console.log('beforeSubmit fileExists: ' + fileExists);

        if (fileExists === 'true') {
            $('#uploadedFile').addClass('inputError');
            $('#fileErrorMsg').append('  A file with that name already exists on the server.');
            formValid = false;
        } else {
            if (!ValidateUploadForm()) {
                formValid = false;
            }
        }

        console.log('formValid: ' + formValid);

        if (!formValid) {
            return false;
        }

    },
    ...

这是 CheckFileExists() 函数:

function CheckFileExists() {

    var fileName = $('#uploadedFile').val().replace(/C:\\fakepath\\/i, ''),
        dataString;

    dataString = 'checkFileExists=' + fileName;

    console.log('fileName: ' + fileName);
    console.log('dataString: ' + dataString);

    $.ajax({
        type: 'POST',
        url: '../scripts/sermonUpload.php',
        data: dataString,
        success: function(serverResult) {
            console.log('serverResult: ' + serverResult);

            if (serverResult === 'existsTrue') {
                return 'true';
            } else {
                return 'false';
            }

        },
        error: function(xhr, status, error) {
            alert('An error occurred while attempting to determine if the selected file exists. Please try again.);
        }
    });

    //console.log('Current value of returnResult: ' + returnResult);
    //return returnResult;
}

如您所见，我正在使用控制台输出来检查发生了什么。在 CheckFileExists() 函数中，正确报告了 fileName 和 dataString。在 PHP 方面，我知道 POST 数据正在到达那里，因为我在那里进行了一些日志记录。

以下是使用 POST 数据的 PHP 代码:

if (isset($_POST['checkFileExists']) && $_POST['checkFileExists'] !== '') {
    $log->lwrite('**Checking if file exists.**');

    $fileToCheck = $targetPath . $_POST['checkFileExists'];

    $log->lwrite('file_exists: ' . file_exists($fileToCheck));

    if (file_exists($fileToCheck)) {
        echo 'existsTrue';
    } else {
        echo 'existsFalse';
    }
}

发生的事情是，在控制台中，行 console.log('beforeSubmit fileExists: ' + fileExists); 返回“undefined”(beforeSubmit fileExists: undefined )。

以下是文件已存在的上传的所有控制台输出，因此应该停止 beforeSubmit:

文件名:042913sermon.mp3 数据字符串； checkFileExists=042913讲道.mp3 提交前文件存在:未定义 formValid:true serverResult:existsTrue

serverResult 行在之后显示其他所有内容，这一点一定很重要。这与 ajax 调用需要多长时间有关吗？如果是这样，有没有办法延迟脚本的其余部分，直到 ajax 调用完成执行？

更新 正如 aorlando 指出的那样，控制台输出的顺序表明我需要将 async: false 添加到我的 $.ajax 调用中。执行此操作后，控制台输出正确，但函数 CheckFileExists() 在 beforeSubmit 中仍然报告为未定义。

Answer 1

好的。现在的问题是返回的范围。 如果你使用“async: false”你可以用这种方式返回(不是那么优雅)

var returnValue='';
$.ajax({
        type: 'POST',
        url: '../scripts/sermonUpload.php',
        data: dataString,
        async: false,
        success: function(serverResult) {
            console.log('serverResult: ' + serverResult);

            if (serverResult === 'existsTrue') {
               returnValue = 'true';

            } else {
                returnValue= 'false';
            }

        },
        error: function(xhr, status, error) {
            alert('An error occurred while attempting to determine if the selected file                           exists. Please try again.);
        }
    });
return returnValue;

您必须声明一个 var returnValue 超出 ajax 调用的范围。在ajax函数中你可以修改returnValue的值； 这是一个使用闭包的解决方案，闭包是一个相当复杂的 JavaScript 功能。进一步阅读有关 javascript 中变量范围的内容:What is the scope of variables in JavaScript?

这不是一个很好的解决方案；如果您在 ajax 调用的“成功”函数中调用一个函数，效果会更好，就像我之前的示例一样。

这就是大家!