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请求onclick，然后将用户重定向到/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">

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

Answer 4

如果您想仅在ajax成功时重定向用户，请放置重定向window.location.href =＆＃39;您的重定向页面＆＃39;在成功的回调中。

否则，如果您需要重定向是否成功，请使用完整回调。

   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属性更改为＆＃34; javascript：void（0）＆＃34;或者您可以使用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/

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

6 个答案: