Question

我正在尝试通过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错误。

Answer 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>

Answer 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（）吗？它更容易使用......

Answer 3

我有类似的问题 - 我的问题是在表格帖子中，我使用$（“表单”）。提交在页面提交之前做一些事情。这个东西包括一个jquery post post。不幸的是，帖子动作在表单发布完成之前就不会完成，因此后来会出现问题 - 我的代码看起来像这样：

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

解决方案是

        event.preventDefault;

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

Answer 4

我尝试了很多选项都不适合我，我改用 post

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

jQuery AJAX表单提交无效

4 个答案: