提交表单时，需要点击两次提交按钮才能触发 AJAX 请求。

Question

提交表单时，需要点击两次提交按钮才能触发 AJAX 请求。

3

我的表单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记录到控制台，但单击提交按钮时却无法提交表单。我需要按两次提交按钮。

有人能告诉我问题出在哪里以及如何修复，使得只需一次点击即可提交表单吗？

注意：表单数据仅用于验证而非实际提交。如果像电子邮件、用户名等数据有效，则希望能够仅需一次点击提交表单。

- NOthingYouknowme

在 jQuery 代码中，当 ajax 请求完成后，$("form").submit(); 应该会提交表单，不是吗？ - NOthingYouknowme

@Blazemonger 根据您的建议，我已经编辑了这段代码，但是我还需要按两次提交按钮吗？ - NOthingYouknowme

将点击事件绑定到输入框上怎么样（将其制作成<button type='button'></button>，然后调用submit）。这样，您就不必阻止表单的默认操作，也不必处理绑定/解除绑定提交操作了。 - scrappedcola

你确定这不是由于ajax调用需要一两秒钟才能响应的副作用吗？ - Deadron

@NOthingYouknowme，你真的解决了你的问题吗？我也有同样的问题 :-) - Dima Dz

7个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kodomo · Answer 1

我曾经遇到过同样的问题，后来发现我的 xxx.php 程序里有一些 bug，可能会返回像 "Notice: Undefined variable: j in xxx.php on line ....." 这样的错误信息，这可能导致 ajax 的运行出现意外情况。只是提供给你参考。

- Tosca · Answer 2

不必在单击提交按钮时执行默认操作，你可以创建一个普通按钮，在单击它时触发一个函数，在该函数的末尾使用$('#form').submit();来提交表单。这样就不会再出现令人困惑的默认操作了。

- Kevin Damstra · Answer 3

首先，我认为使用成功函数而不是 .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");
        }
    });
});

请注意，我移除了.unbind()函数，因为我怀疑它可能是你的代码出问题的原因。它会从表单中删除事件处理程序，而不管它们的类型（参见：http://api.jquery.com/unbind/）。此外，我将e.preventDefault()放在了开头。我建议你尝试这个编辑过的代码，并告诉我们它是否起作用。

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

- Philipp Werminghausen · Answer 4

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

只需更改这一行：

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

到

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

- user3923354 · Answer 5

试试这个。

$("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();
    });
});

- Malovich · Answer 6

$("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()停止表单提交。

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

返回值，我认为是一个布尔值。如果它经过验证，它将是true或false。

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

注意：这是一种可怕的验证表单的方式。我会在服务器上通过表单提交进行验证，因为JavaScript可以很容易地被篡改。从强制服务器响应真实到关闭提交事件监听器，什么都有可能。

- Damon · Answer 7

由于您通过ajax提交数据，因此无需调用submit()。

编辑根据您的需求，您可能需要调整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;
}