使用jQuery进行AJAX请求后停止重定向

Question

I'm trying to get a simple form to submit via AJAX to the submit.php page where it is sent to a database. 我正在尝试获取一个简单的表单，以通过AJAX提交到Submit.php页面，并在其中将其发送到数据库。 When I submit it, it redirects to submit.php. 当我提交它时，它重定向到submit.php。 I want it to submit without redirecting. 我希望它提交而无需重定向。 Thanks in advance! 提前致谢！

JS JS

var request;
$("#myForm").submit(function(event){
    if (request) {
        request.abort();
    }
    var $form = $(this);
    var $inputs = $form.find("input, select, button, textarea");
    var serializedData = $form.serialize();
    $inputs.prop("disabled", true);
    request = $.ajax({
        url: "/submit.php",
        type: "post",
        data: serializedData

        //Could something like this work? 
        //complete: function() {***Stop redirect?***}



    });

    request.done(function (response, textStatus, jqXHR){
        console.log("Hooray, it worked!");
    });

    request.fail(function (jqXHR, textStatus, errorThrown){
        console.error(
            "The following error occured: "+
            textStatus, errorThrown
        );
    });

    request.always(function () {
        $inputs.prop("disabled", false);
    });

    event.preventDefault();
});

Answer 1

Is the document ready when your code runs? 代码运行时文档准备好了吗？ If not, $("#myForm") is returning an empty jQuery object, therefore any handlers attached to it won't ever be called. 如果不是，则$("#myForm")返回一个空的jQuery对象，因此将永远不会调用附加到该对象的任何处理程序。 Test this by saving the jQuery object to a variable and logging it to the console. 通过将jQuery对象保存到变量并将其记录到控制台中来进行测试。

Two solutions: 两种解决方案：

Move your code into a document ready handler: $(function () { /* my code dependent on DOM elements */ }); 将您的代码移动到文档就绪处理程序中： $(function () { /* my code dependent on DOM elements */ });
Use an event listener instead of binding to elements: $(document).on('submit', '#myForm', function (event) { /* handler */ } 使用事件侦听器代替绑定到元素： $(document).on('submit', '#myForm', function (event) { /* handler */ }

There's nothing wrong with the event.preventDefault(); event.preventDefault();没有任何问题event.preventDefault(); line - it can stay where it is, although I prefer to place it at the very top unless it's part of a conditional - and return false; 行-它可以保留在原处，尽管我更喜欢将它放在最上面，除非它是有条件的一部分-然后return false; isn't needed. 不需要。

Reason I can answer this : I just setup a local test for this and came across the same problem: my submit handler wasn't running at all. 我可以回答这个问题的原因 ：我只是为此设置了一个本地测试，并且遇到了相同的问题：我的提交处理程序根本没有运行。 But then I realised my <script> tag was before the #myForm element but my code wasn't waiting until #myForm was in the document before trying to find it with $() . 但是后来我意识到我的<script>标记在#myForm元素之前，但是我的代码没有等到#myForm在文档中，然后才尝试通过$()查找它。

Edit : Placing the <script> tag at the bottom of the <body> negates the need to wait for document ready in your case. 编辑：将<script>标记放置在<script> <body>的底部不需要等待文档准备就绪的情况。 It also speeds up page rendering, but that's a whole other discussion. 它还可以加快页面渲染速度，但这是另一个完整的讨论。

Answer 2

Put the event.preventDefault(); 把event.preventDefault（）; right after the first code line the one with the .submit listener 在第一个代码行之后，带有.submit侦听器的代码行

使用jQuery进行AJAX请求后停止重定向

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-01-01 03:33:00

解决方案2
0 2014-01-01 03:09:58

使用jQuery进行AJAX请求后停止重定向

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-01-01 03:33:00

解决方案2 0 2014-01-01 03:09:58

解决方案1
1 已采纳 2014-01-01 03:33:00

解决方案2
0 2014-01-01 03:09:58