Question

我有以下HTML和jQuery Ajax代码：

<form>
    <input name="name_field" type="text">
    <button type="submit">Save</button>
</form>

$(document).on("submit", "form", function(event) {
    event.preventDefault();
    $(".error").hide("blind", function() {
        $.ajax({
            url: 'php/script.php',
            type: 'POST',
            dataType: 'json',
            data: $(this).serialize(),
            success: function(data) {
                console.log(data);
            }
        });
    });
});

这是我的PHP代码：

<?php

    $name = $_POST['name_field'];

?>

当我提交表单时，它会显示以下错误：

Undefined index: name_field

但是，当我将jQuery Ajax更改为不等待.error类完成时，它显示没有错误并且完全正常：

$(document).on("submit", "form", function(event) {
    event.preventDefault();
    $(".error").hide("blind"); // remove function() here
    $.ajax({
        url: 'php/script.php',
        type: 'POST',
        dataType: 'json',
        data: $(this).serialize(),
        success: function(data) {
            console.log(data);
        }
    });
});

为什么会这样做以及如何解决？

Answer 1

由于用于序列化的this引用，在hide回调中它引用了error元素而不是表单元素

$(document).on("submit", "form", function (event) {
    event.preventDefault();
    var $form = $(this);
    $(".error").hide("blind", function () {
        $.ajax({
            url: 'php/script.php',
            type: 'POST',
            dataType: 'json',
            //this here is not the form element it is the error element
            data: $form.serialize(),
            success: function (data) {
                console.log(data);
            }
        });
    });
});

使函数等待直到事件结束后出错

1 个答案: