Question

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

我有一个我需要使用ajax提交的表单，但我无法正确地完成它。它需要submt，而不是刷新（正如你所期望的那样），但它似乎并不重要，我可以让它做的就是将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>

Answer 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;
        });

 });

使用按钮提交Ajax表单

1 个答案: