在Django中通过Ajax有条件地阻止/允许超链接点击答案

【问题标题】：Prevent/allow a hyperlink click conditionally through Ajax in Django在Django中通过Ajax有条件地阻止/允许超链接点击
【发布时间】：2018-07-23 20:54:30
【问题描述】：

我正在尝试在一个页面上实现一个超链接，当单击该超链接时，它将首先通过 ajax 提交，运行一些检查以确定用户是否有权访问超链接页面，然后允许他们访问通过或阻止超链接的默认操作（并引发错误）。

我已经设置了代码，ajax 请求会通过，但不会在服务器端处理。

这是模板代码：

<a class='btn btn-primary pairing-CTA-btn' href="{% url 'profile:request' object.user %}">Send {{object.user | upper}} a Request</a>

js：

$(document).ready(function(){

    var $myButton = $('.pairing-CTA-btn')
    $myButton.click(function(event){
        var $buttonData = $(this).serialize()
        var $endpoint = $myButton.attr('data-url') || window.location.href // or set your own url

        $.ajax({
            method: "GET",
            url: $endpoint,
            data: $buttonData,
            success: handleSuccess,
            error: handleError,
        })
    })

    function handleSuccess(data, textStatus, jqXHR){
        // No need to do anything here. Allow link click.
        console.log(data)
        console.log(textStatus)
        console.log(jqXHR)
    }

    function handleError(jqXHR, textStatus, errorThrown){
        // on error, prevent default, bring up errors
        event.preventDefault()
        // $('.pairing-CTA-btn-errors').text("YOU SHALL NOT CLICK BUTTON");
        // $('.pairing-CTA-btn-errors').show();
        console.log(jqXHR)
        console.log(textStatus)
        console.log(errorThrown)
    }
})

此链接所在的视图：

class ProfileDetailView(AjaxRequestButtonMixin, DetailView):
    template_name = 'user_profile/profile_detail.html'

在将超链接点击连接到后端时，我缺少什么？

【问题讨论】：

标签： jquery ajax django django-templates django-views

【解决方案1】：

您应该在 click() 事件中而不是在 handleError 回调中防止默认值。

event 不存在于 handleError 函数中，因为它是一个 Ajax 请求，所以执行是异步的（除非您使 Ajax 请求同步）。

所以，基本上还原逻辑：默认拒绝，成功时允许。不是默认允许，而是拒绝错误。

$(document).ready(function(){

    var $myButton = $('.pairing-CTA-btn')
    $myButton.click(function(event){
        event.preventDefault()  // <- here

        var $buttonData = $(this).serialize()
        var $endpoint = $myButton.attr('data-url') || window.location.href // or set your own url

        $.ajax({
            // ...
        })
    })

    function handleSuccess(data, textStatus, jqXHR){
        // send the user to the link
        window.location = $myButton.attr("href");
    }

    function handleError(jqXHR, textStatus, errorThrown){
        // ...
    }
})

【讨论】：

你是对的！我习惯于将错误/成功处理程序定义为 Ajax 定义中的匿名函数，因此我没有注意这个细节。查看更新。