由jQuery Form Plugin調用的函數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：

fileName: 042913sermon.mp3 dataString; checkFileExists=042913sermon.mp3 dataString; checkFileExists=042913sermon.mp3 beforeSubmit fileExists: undefined formValid: true serverResult: existsTrue

必須重要的是serverResult行顯示在其他所有內容之后。 這與ajax調用需要多長時間有關嗎？ 如果是這樣，有沒有辦法延遲腳本的其余部分，直到ajax調用完成執行？

更新正如aorlando所指出的，控制台輸出的順序表明我需要在我的$ .ajax調用中添加async: false 。 執行此操作后，控制台輸出正確，但函數CheckFileExists（）仍然在beforeSubmit中報告為未定義。

Answer 1

您正在使用AJAX異步調用。 您的方法CheckFileExists（）n在ajax調用完成之前返回一個值。 所以最簡單的解決方案是使用：

 $.ajax({
        type: 'POST',
        url: '../scripts/sermonUpload.php',
        data: dataString,
        async: false ...

如果你想使用異步調用（默認情況下你可以看到： http ：//api.jquery.com/jQuery.ajax/你必須在ajax調用的成功函數中調用（例如）一個postcall函數：

success: function(serverResult) {
        console.log('serverResult: ' + serverResult);

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

        } else {
            postFn('false');
        }

    }, ...

小心postFn的范圍

funcion postFn(_result){
    console.log(_result);
}

我希望能夠清楚。 這就是所有人！

Answer 2

好。 現在的問題是回報的范圍。 如果您使用“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;

您必須在ajax調用的范圍之外聲明一個var returnValue。 在ajax函數內部，您可以修改returnValue的值; 這是一個使用閉包的解決方案，這是一個非常復雜的JavaScript功能。 進一步閱讀javascript中變量范圍的內容： JavaScript中變量的范圍是什么？

這不是一個很好的解決方案; 如果你調用ajax調用的“success”函數中的函數作為我之前的例子，那會更好。

這就是所有人！