javascript 成功调用ajax后跟随链接href
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16563338/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Following link href after successful ajax call
提问by Alex
I've got a normal link:
我有一个正常的链接：
<a href="http://www.google.com" class="continue">Continue</a>
I've bound the click to an event to post an ajax request like this:
我已将点击绑定到一个事件以发布这样的 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;
}
});
});
What I'm trying to get to happen is the link to be followed on success....
ie, if there is no error, user should be redirected to google.
我想要发生的是成功时要遵循的链接......
即，如果没有错误，用户应该被重定向到谷歌。
I know I can put window.location.hrefin the success handler, but I was trying to avoid this if possible
我知道我可以放入window.location.href成功处理程序，但如果可能的话，我试图避免这种情况
回答by snumpy
Unfortunately (in your case), ajax is asynchronous, meaning that your click function starts the ajax call and then continues running without paying any attention to what it does (and thus returns nothing at the end).
不幸的是（在您的情况下），ajax 是异步的，这意味着您的 click 函数会启动 ajax 调用，然后继续运行而无需注意它的作用（因此最后不返回任何内容）。
The success function is called later (when the ajax returns successfully) and is a completely different function, so its returning truehas no bearing on your original click function.
成功函数稍后调用（当 ajax 成功返回时）并且是一个完全不同的函数，因此它的返回true与您原来的点击函数无关。
All this to say, you will need to use javascript to override the anchor tag's natural behavior (go directly to google.com) and what happens afterward (redirect).
综上所述，您将需要使用 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');
}
});
});
回答by Broxzier
Have you tried something like this:
你有没有尝试过这样的事情：
$('.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
}
});
});
Or if the link is send with the responding text, use that data.
或者，如果链接与响应文本一起发送，请使用该数据。
Edit: I didn't saw your last line, what's the reason for not wanting to use that? It's perfectly dynamic and supported by all browsers that support JavaScript.
编辑：我没有看到你的最后一行，不想使用它的原因是什么？它是完全动态的，所有支持 JavaScript 的浏览器都支持它。
回答by Shijin TR
You can try this,
你可以试试这个
$('.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;
});
回答by keyboardface
If we need to actually have a "click" here, we should just trigger the click event newly and allow it to return true on the second click.
如果我们真的需要在这里有一个“点击”，我们应该只触发新的点击事件，并让它在第二次点击时返回真。
$('.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();
}
});
});
