Question

我在这个网址'/ main /'的HTML包含以下链接：

<a href="/main/" id="do_something">Do Something</a>

因此，链接应该执行某些操作然后刷新页面。

我的jquery看起来像这样：

$('#do_something').click(function(event) {

    var my_values = ['1','2'];

    $.ajax({
        url:"/process_values/",
        type: "POST",
        data: {values:my_values},
        success:function(response){
            alert("success: " + response);
        },
        error:function (xhr, textStatus, thrownError){
            alert("xhr status: " + xhr.statusText);
        },

    });

}）;

帖子正确执行，但错误回调总是在完成后调用。

如果我阻止使用event.preventDefault（）;来阻止链接，则执行success函数。为什么是这样？如何在发布电话后更新页面？

由于

Answer 1

如果没有event.preventDefault()，用户将被定向到/main/（因为它是锚的默认行为）。卸载页面会导致所有挂起（XmlHttp）请求中止，从而触发error函数（=请求尚未完成）。

概述：

点击 #do_something
触发 click事件 - ＆gt; Ajax请求
跟随链接到/main/。
页面卸载 - ＆gt;取消所有请求
XHR已中止 - ＆gt; error功能已触发

如果您希望页面打开，请在success功能中添加：

location.href = "/main/";

或者，如果您不想对链接进行硬编码：

$('#do_something').click(function(event) {
    event.preventDefault();
    var linkTo = $(this).attr("href");
    var my_values = ['1','2'];
    $.ajax({
        url:"/process_values/",
        type: "POST",
        data: {values:my_values},
        success:function(response){
            alert("success: " + response);
            location.href = linkTo; //Redirect the user to the new page
        },
        error:function (xhr, textStatus, thrownError){
            alert("xhr status: " + xhr.statusText);
        },
    });
});

Answer 2

使用Ajax的想法是不进行页面重新加载，而是异步加载数据（一次加载数据）

如果您真的需要，请使用location.reload();

Answer 3

你可以这样做：

$('#do_something').click(function(event) {
    var hrefSaved = $(this).attr('href');
    event.preventDefault();

    var my_values = ['1','2'];

    $.ajax({
        url:"/process_values/",
        type: "POST",
        data: {values:my_values},
        success:function(response){
            alert("success: " + response);
            window.location.href = hrefSaved
        },
        error:function (xhr, textStatus, thrownError){
            alert("xhr status: " + xhr.statusText);
        },

       });
    });

以这种方式阻止默认操作，进行AJAX调用，如果调用成功，则重定向到所需页面

Jquery锚标记点击事件执行ajax帖子，当它重定向时，它会导致错误回调执行

3 个答案: