jQuery AJAX表单提交无效

时间:2010-04-27 16:05:21

标签: jquery ajax forms submit

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

4 个答案:

答案 0 :(得分:5)

如果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>

答案 1 :(得分: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()吗?它更容易使用......

答案 2 :(得分:0)

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

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

解决方案是

        event.preventDefault;

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

答案 3 :(得分:0)

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

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