使用ajax将数据传递给django视图答案

【问题标题】：Pass data to django view with ajax使用ajax将数据传递给django视图
【发布时间】：2020-07-27 03:45:10
【问题描述】：

我对 django 和 jquery、ajax 等整个世界都很陌生。

我有一个页面，当函数（javascript、jquery）运行时，我使用 POST 方法将一些数据传递到我的 django 视图。

我的jquery函数是：

    function handleClick(e) {
        var myDataVariable = Variable
        var url = window.location.href
        var obj = {'Cellid': myDataVariable }
        $.ajax(
            {type:'POST',
             url: url,
             data: JSON.stringify(obj),
             contentType: 'application/json; charset=utf-8',
             success: function (data) {}
          });
    }

在我的 django 视图中，我有：

    def Main(request):

        if request.method == 'POST':
            params = json.loads(request.body)
            Cellid = params['Cellid']
            CellData = cellData.cell_Data(int(Cellid))
        else:
            CellData =[]

        context = {
            'CellData':CellData,
        }

        return render(request, 'Main/Main.html', context)

虽然页面工作正常，但调用函数时出现错误：

禁止（CSRF 令牌丢失或不正确。）：/Main/Main

有人可以帮我解决这个错误吗？这可能很简单，但正如我所说，我对此很陌生，这让我很生气！我真的很感激一个简单易懂的解释。

非常感谢！

【问题讨论】：

标签： jquery django ajax post

【解决方案1】：

您必须首先使用此函数将您的 django CSRF 令牌提取到 jquery 中：

// using jQuery to define CSRF token
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie('csrftoken');

然后您可以将 csrftoken 变量传递到您的 ajax 请求标头中，如下所示：

$.ajax({                   
        url: url,                    
        method: "POST",
        data: {
          data
        },
        headers: { "X-CSRFToken": csrftoken }.....

对于 CSRF 令牌的某些上下文：它们基本上是在应用程序中的 POST api 调用之间传递的安全令牌，这表明请求是从应用程序内部发出的，而不是来自潜在的恶意第三方

希望对你有帮助

【讨论】：