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

Function called by jQuery Form Plugin's beforeSubmit not returning value

本文关键字:beforeSubmit 返回值 插件 表单 调用 函数 jQuery      更新时间:2023-09-26

我的jQuery表单插件中的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.mp3dataString; checkFileExists=042913sermon.mp3beforeSubmit fileExists: undefinedformValid: trueserverResult: existsTrue

serverResult行在之后显示一定很重要。这与ajax调用所需的时间有关吗?如果是这样,是否有办法延迟脚本的其余部分,直到ajax调用完成执行?

正如aorlando所指出的,控制台输出的顺序表明我需要将async: false添加到$中。ajax调用。这样做之后,控制台输出是正确的,但是函数CheckFileExists()仍然在beforeSubmit中被报告为未定义。

好的。现在的问题是回报的范围。如果你使用"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调用的"成功"函数中调用一个函数会更好。

大家好!

您正在使用AJAX异步调用。您的方法CheckFileExists()在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);
}

我希望能说清楚。大家好!