必须点击提交两次AJAX请求才能触发表单提交

Have to click submit twice for AJAX request to fire on form submission

本文关键字：请求 AJAX 表单提交 两次 提交      更新时间：2023-09-26

My Form HTML如下所示。

<form novalidate action="register.php" method="post" >
    <label for="username">Username</label>
    <input type="text" name="username" required placeholder="Your username" autofocus/>
    <input type="submit" name="register" value="Register" cid="submit" />
</form>

我的jQuery看起来像这个

$("form").submit(function(e) {
    var $form = $(this);
    var serializedData = $form.serialize();    
    request = $.ajax({
        url: "check.php",
        type: "post",
        data: { formData: serializedData },
        datetype: "JSON"
    });
    request.done(function(response, textStatus, jqXHR) {
        console.log("HELLO");
        $('form').unbind(); 
        $('form').submit();
    });
    e.preventDefault();
});

可悲的是，它将hello记录到控制台，但它从未通过单击提交按钮提交表单。我需要按两次才能提交按钮。

有人能告诉我这个问题吗？我该如何解决它，这样一次点击就足够提交表格了。

注：表格中的数据是为了验证而发送的，而不是为了提交。如果电子邮件、用户名等数据是有效的，我希望表单可以一键提交。

尝试将验证与表单提交分离。

只需更改此行：

$("form").submit(function(e) {

至

$("input[name='register']").click(function(e) {

首先，我认为使用success函数而不是.done((函数会更干净。例如：

$("form").submit(function(e) {
    e.preventDefault();
    var $form = $(this);
    var serializedData = $form.serialize();
    request = $.ajax({
        // Merge the check.php and register.php into one file so you don't have to  'send' the data twice.
        url: "register.php",
        type: "post",
        data: { formData: serializedData },
        datetype: "JSON",
        success: function() {
            console.log("This form has been submitted via AJAX");
        }
    });
});

请注意，我删除了.ubind((函数，因为我怀疑这可能是您的代码出现问题的原因。它从表单中删除事件处理程序，而不管它们的类型如何(请参阅：http://api.jquery.com/unbind/)。此外，我还将e.preventDefault((放在了开头。我建议您尝试这段经过编辑的代码，并告诉我们它是否有效。

编辑：哦，是的，当你通过AJAX发送数据时，你不需要提交它。

试试这个。

$("form").submit(function(e) {
    var $form = $(this);
    var serializedData = $form.serialize();    
    request = $.ajax({
        url: "check.php",
        type: "post",
        data: { formData: serializedData },
        datetype: "JSON"
    });
    request.done(function(response, textStatus, jqXHR) {
        console.log("HELLO");
        $('form').unbind(); 
        $('form').submit();
    });
});

$("form").submit(function(e) {
    e.preventDefault();
    var $form = $(this);
    var serializedData = $form.serialize();
    $.ajax({
        url: "check.php",
        type: "post",
        data: { formData: serializedData },
        datatype: "JSON",
        success: function(data) {
            return data;
        }
    });
});

所以，把它分解。

使用preventDefault((停止表单提交。

获取表单数据并将其提交给验证器脚本。

我认为返回值是一个布尔值。如果它被验证，它将是真的，或者是假的。

返回将继续提交或结束表单的值。

注：这是一种糟糕的验证表单的方法。我会在服务器上通过表单提交来验证我的表单，因为javascript非常容易被篡改。从强制服务器发出真正的响应到关闭提交事件侦听器的所有操作。

一旦我遇到同样的问题我发现我的url xxx.php中有一些错误它可能会返回错误消息，如"注意：xxx.php中的未定义变量：j在第..行"它可能会让ajax以意想不到的方式运行。仅供参考。

单击提交按钮时，您可以创建一个普通按钮并在单击该按钮时激发一个函数，而不是执行阻止默认操作，在该函数结束时，使用$('#form').submit();提交表单。不再有令人困惑的防止默认。

您不需要调用submit()，因为您是通过ajax发布数据的。

EDIT您可能需要根据需要调整contentType和/或其他ajax参数。PHP示例非常基础。你的表格很可能要复杂得多。此外，您还需要清理任何php数据——不要只依赖$_POST

jQuery:

$("form").submit(function(e) {
    $.ajax({
        'type': 'post',
        'contentType': 'application/json',
        'url': 'post.php',
        'dataType': 'json',
        'data': { formData: $(this).serialize},
        'timeout': 50000
     ).done(function(data) {
         // Response from your validation script
         if (data === true)
         {
            // SUCCESS!
         }
         else
         {
             // Something happened.
         }
     ).fail(function(error) {
         console.log(error);
     });
    e.preventDefault();
});

PHP

$is_valid = FALSE;
$name = $_POST['name'];
if ($name !== '')
{
     $is_valid = TRUE;
}
else
{
   return FALSE;
}
if ($is_valid)
{
    // insert into db or email or whatver
    return TRUE;
}
相关文章：