如何避免javascript函数中的重定向

Question

我有一个函数名称 HideN，当用户点击如下所示的链接时会触发它

<a href="<?php echo $dn5['link']; ?>" onclick="HideN('<?php echo $dn5['id'];?>','<?php echo $dn5['from_user'];?>')" class="media"> 

这给了我

<a href="/page/example" onclick="HideN('25','username')" class="media">

现在我想在点击时发送一个 ajax 请求，然后将用户重定向到 /page/example，但它总是中止 ajax 请求并重定向页面

function HideN(t, a) {
    var e = {
        id: t,
        user: a
    };
    $.ajax({
        type: "POST",
        url: "https://www.example.com/ajax/hideN?status=hideIt",
        data: e,
        success: function(t) {}
    })
};

我怎样才能先发送一个ajax请求，然后在成功响应后重定向页面

链接是从数据库中动态生成的，每个链接都会不同

Answer 1

您需要阻止 event.preventDefault() 的默认点击并在 ajax 成功时重定向

<a href="" onclick="HideN(event, '<?php echo $dn5['id'];?>','<?php echo $dn5['from_user'];?>', '<?php echo $dn5['link'];?>')" class="media">

        function HideN(ev,t, a, lk) {
            ev.preventDefault();
            var e = {
                id: t,
                user: a
            };
            $.ajax({
                type: "POST",
                url: "https://www.example.com/ajax/hideN?status=hideIt",
                data: e,
                success: function(t) {
                window.location.href = lk;
}
            })
        };

Answer 2

我想我找到了自己

<a href="javascript:void(0);" onclick="HideN('<?php echo $dn5['id'];?>','<?php echo $dn5['from_user'];?>','<?php echo $dn5['link'];?>')" class="media">

这给了我

<a href="javascript:void(0);" onclick="HideN('25','username','/page/link')" class="media">

function HideN(t, a, c) {
    var e = {
        id: t,
        user: a
    };
    $.ajax({
        type: "POST",
        url: "https://www.example.com/ajax/hideN?status=hideIt",
        data: e,
        success: function(t) {
            window.location.href = c;
        }
    })
};

Answer 3

而不是将链接放在锚标记中，例如：

<a href="/page/example" onclick="HideN('25','username')" class="media">

您可以输入href="javascript:void(0);"，这样链接就不会真正尝试更改页面：

<a href="javascript:void(0);" onclick="HideN('25','username')" class="media">

现在您的 ajax 调用将完成，您可以在 success 函数内进行重定向。

success: function(t) {
    window.location.href = "<?php echo $dn5['link']; ?>";
}

如果 javascript 在单独的 .js 文件中，您无法通过 PHP 更改，则可以将链接更改为：

<a href="javascript:void(0);" onclick="HideN('<?php echo $dn5['id'];?>','<?php echo $dn5['from_user'];?>','<?php echo $dn5['link']; ?>')" class="media">

并将 javascript 更改为：

function HideN(t, a, link) {
    var e = {
        id: t,
        user: a
    };
    $.ajax({
        type: "POST",
        url: "https://www.example.com/ajax/hideN?status=hideIt",
        data: e,
        success: function(t) {
            window.location.href = link;
        }
    })
};

现在链接将作为参数传递给HideN 函数，并可用于在success 函数内部进行重定向。

链接的另一个选项，正如对问题 Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"? 的评论中所建议的那样，将 HideN 函数用作 href 值：

<a href="javascript:HideN('<?php echo $dn5['id'];?>','<?php echo $dn5['from_user'];?>','<?php echo $dn5['link']; ?>')" class="media">

编辑：在 cmets 后更改为 href="javascript:void(0);" 而不是 href="#"，进一步的研究表明它更好。

Answer 4

如果您只想在 ajax 成功时重定向用户，请将重定向 window.location.href = 'your redirect page' 放在成功回调中。

否则如果需要重定向成功与否，使用完成回调。

   function HideN(t, a) {
        var e = {
            id: t,
            user: a
        };
        $.ajax({
            type: "POST",
            url: "https://www.example.com/ajax/hideN?status=hideIt",
            data: e,
            success: function(response) { window.location.href = "http://google.com"}
        })
    };

稍后编辑@codenoire：您应该将 href 属性更改为“javascript: void(0)”，或者您可以使用 preventDefault

Answer 5

<a href="<?php echo $dn5['link']; ?>" onclick="HideN('<?php echo $dn5['id'];?>','<?php echo $dn5['from_user'];?>', '<?php echo $dn5['link']; ?>')" class="media"> 

然后有这个功能：

function HideN(t, am, link) {
    var e = {
        id: t,
        user: a
    };
    $.ajax({
        type: "POST",
        url: "https://www.example.com/ajax/hideN?status=hideIt",
        data: e,
        success: function(t) {
            window.location = link;
        }
    })
    return false;
};

Answer 6

添加

return false;

到您的 HideN 函数最后一行。或

使用

preventDefault 

停止点击事件默认行为

https://api.jquery.com/event.preventdefault/