jQuery AJAX 表单提交不起作用答案

【问题标题】：jQuery AJAX form submission not workingjQuery AJAX 表单提交不起作用
【发布时间】：2011-02-12 22:49:03
【问题描述】：

我正在尝试通过 AJAX 提交表单，而不是使用普通的 POST 提交。 HTML 只是带有method="post" 的标准格式，我的 jQuery 代码如下：

jQuery.noConflict();
jQuery(document).ready( function($) {
    var $form = $('#default_contact');

    $form.submit( function() {
        $.ajax({
            type: 'POST',
            url: $form.attr( 'action' ),
            data: $form.serialize(),
            success: function( response ) {
                console.log( response );
            }
        });

        return false;
    });
});

（基于this answer）

我从提交函数返回 false，但表单仍在提交，我不知道为什么。没有收到任何 Firebug 错误。

【问题讨论】：

标签： jquery ajax forms submit

【解决方案1】：

如果 html 设置正确，您的代码可以正常工作。这是我的测试html（带有php），所以你可以和你自己的比较。

<?php
if (!empty($_POST)) {
  die("<pre>" . print_r($_POST, true) . "</pre>");
}
?>
<html>
<head>
  <title>ajax submit test</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function ($) {
        var $form = $('#default_contact');

        $form.submit(function () {
            $.ajax({
                type: 'POST',
                url: $form.attr('action'),
                data: $form.serialize(),
                success: function (response) {
                    alert(response);
                }
            });

            return false;
        });
    });
</script>      
</head>
<body>
  <form id="default_contact" action="formsubmit.php" method="post">
    <input type="hidden" value="123" name="in1" />
    <input type="hidden" value="456" name="in2" />
    <input type="submit" value="send" />
  </form>
</body>
</html>

【讨论】：

原来是一件非常愚蠢的事情——没有包含 jQuery 库代码。它在我正在测试的页面上是错误的 PHP 条件... D'oh！

【解决方案2】：

如果您设置了 html 以使表单完全独立工作，那么它将像没有 jquery 的普通表单一样工作。因此，从 html 中取出 action 属性，并将您的 jquery 更改为：

url: your-submit-file.php,

如果这不起作用，请尝试：

jQuery(document).ready( function($) {
    var $form = $('#default_contact');

    $form.submit( function(event) {
        $.ajax({
            type: 'POST',
            url: your-submit-file.php,
            data: $form.serialize(),
            success: function( response ) {
                console.log( response );
            }
    });
    event.preventDefault;
    return false;
});

另外，你试过 jQuery 的 $.post() 吗？它更容易使用...

【讨论】：

【解决方案3】：

我有一个类似的问题 - 我的问题是在表单发布期间，我在提交页面之前使用 $("form").submit 来做一些事情。这包括一个 jquery post 操作。不幸的是，在表单发布完成之前发布操作不会完成，因此后来导致了问题 - 我的代码如下所示：

        $("form").submit(function () {
                var result =
                    $.post('/Controller/Action',
                    { data: array.toString() }
            });

解决办法是

        event.preventDefault;

在返回 true 之前立即停止表单发布，直到 ajax 调用完成。

【讨论】：

【解决方案4】：

我尝试了很多对我不起作用的选项，我使用 post 代替

$.post("myUrl", $( "#hiddenForm" ).serialize() ).done(function(data){
 myMap = new Map(Object.entries(data));        
 .....
 ......
});

【讨论】：