成功进行ajax调用后,链接href

时间:2013-05-15 11:02:58

标签: javascript ajax jquery

我有一个正常的链接:

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

我已将点击绑定到某个事件,以发布如下的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放入成功处理程序中,但如果可能的话我试图避免这种情况

4 个答案:

答案 0 :(得分:11)

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

稍后调用success函数(当ajax成功返回时)并且是一个完全不同的函数,因此返回true与原始单击函数无关。

所有这一切,你需要使用javascript覆盖锚标签的自然行为(直接转到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');
        }
    });
});

答案 1 :(得分:2)

你有没有试过这样的事情:

$('.continue').click(function(e) {
    e.preventDefault();
    var link = $(this).attr('href');

    $.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; // <-- This line
        }
    });
});

或者如果链接与响应文本一起发送,请使用该数据。

编辑:我没看到你的最后一行,不想用它的原因是什么?它非常动态,并且支持所有支持JavaScript的浏览器。

答案 2 :(得分:1)

你可以试试这个,

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

       $(location).attr('href',$(this).attr('href'));
    }
  });
  return false;
 });

答案 3 :(得分:0)

如果我们需要实际上有一个&#34;点击&#34;在这里,我们应该只是新触发click事件并允许它在第二次单击时返回true。

$('.continue').click(function () 
{
    if ($(this).attr('tracked')!=undefined)
    {
        return true;
    }
    a = $(this);
    $.ajax({
        type: 'POST',
        url: '/url-to-post-to',
        data: mydata,
        contentType: 'application/json',
        error: function (err) {
            alert("error - " + err);
        },
        success: function () {
            $(this).attr('tracked',true);
            $(a)[0].click();
        }
    });
});