使用按钮提交 Ajax 表单答案

【问题标题】：Ajax form submission using button使用按钮提交 Ajax 表单
【发布时间】：2013-07-03 15:09:17
【问题描述】：

似乎有很多几乎相同的问题的答案，但我似乎无法解决这个问题。如果你看过一千遍，请原谅我：

我有一个需要使用 ajax 提交的表单，但我无法让它正确完成。它需要提交，而不是刷新（如您所料），但我做什么似乎并不重要，我所能做的就是将 POST 附加到页面的当前 URL。我已经将表格精简到最低限度，并且仍然得到这个结果，所以我一定做错了什么。任何帮助表示赞赏，谢谢！

<html>
    <body>
        <form class="form horizontal" id="logForm">
            <fieldset>
                <div class="control-group">
                    <div style="float: left">
                        <label for="from">Start Date: </label>
                        <div class="controls">
                            <input type="text" id="from" name="from" />
                        </div>
                        <label for="to">End Date:</label>
                        <div class="controls">
                            <input type="text" id="to" name="to" />
                        </div>
                    </div>
                </div>
            </fieldset>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary" id="subButton" style="float: left">Search!</button>
            </div>
        </form>
        <script>
            $("#logForm").submit(function() {
                $.ajax({
                    url: 'logQuery.php',
                    type: 'get',
                    dataType: 'json',
                    data: $('form#logForm').serialize(),
                    success: function(html) {
                    alert('worked good');
                    return false;
                    }
                });
            });
        </script>
    </body>
</html>

【问题讨论】：

标签： html ajax forms post

【解决方案1】：

更改您的脚本添加就绪并在正确的行返回 false。你return false 当异步操作完成时，可能是在函数返回之后。这就是为什么您不阻止提交事件的标准行为。

返回值应在submit() 函数内。

提示：

你不需要使用form#logForm，因为只有一个id=logForm的元素（至少应该是）#logForm就足够了。

在将事件绑定到元素时也始终使用 document.ready。这将确保您已加载站点上的所有元素，以便您可以将事件绑定到它们。

您也可以使用preventDefault()，但return false 也不错。

 $(function (){
       $("#logForm").submit(function() {
            $.ajax({
                url: 'logQuery.php',
                type: 'get',
                dataType: 'json',
                data: $('form#logForm').serialize(),
                success: function(html) {
                alert('worked good');
                }
            });
           return false;
        });

 });

【讨论】：

非常感谢；这很有意义。真的很感激。