javascript - ajax 调用成功后点击链接 href

Question

我有一个正常的链接:

<a href="http://www.google.com" class="continue">Continue</a>

我已将点击绑定(bind)到一个事件来发布 ajax 请求，如下所示:

$('.continue').click(function () {

    $.ajax({
        type: 'POST',
        url: '/url-to-post-to',
        data: mydata,
        contentType: 'application/json',
        error: function (err) {
            alert("error - " + err);
        },
        success: function () {
            return true;
        }
    });
});

我想要实现的是成功后要遵循的链接....
即，如果没有错误，用户应该被重定向到谷歌。

我知道我可以将 window.location.href 放入成功处理程序中，但如果可能的话我试图避免这种情况

Answer 1

不幸的是(在您的情况下)，ajax 是异步的，这意味着您的 click 函数启动 ajax 调用，然后继续运行，而不关注它的作用(因此最终不会返回任何内容)。

成功函数稍后调用(当ajax成功返回时)，并且是一个完全不同的函数，因此它的返回true与您原来的点击函数无关。

所有这些都说明，您需要使用 JavaScript 来覆盖 anchor 标记的自然行为(直接访问 google.com)以及随后发生的情况(重定向)。

$('.continue').click(function (e) {
    e.preventDefault(); // otherwise, it won't wait for the ajax response
    $link = $(this); // because '$(this)' will be out of scope in your callback

    $.ajax({
        type: 'POST',
        url: '/url-to-post-to',
        data: mydata,
        contentType: 'application/json',
        error: function (err) {
            alert("error - " + err);
        },
        success: function () {
            window.location.href = $link.attr('href');
        }
    });
});