Django - 从 javascript 发送 POST 请求

Question

我有一个 JS 事件触发函数，其目标是发送一个 POST 请求以更新我数据库中的一些对象。触发该函数的事件是一个drop-event，所以我最初避免使用表单来传递我的请求，但如果我做错了请告诉我。

大编辑：

我发现我的错误是我的帖子请求中没有包含 csrf_token。 但是，我仍然有一个错误：当我在 django 视图上执行 print(request.POST) 时，我的帖子请求为空。

我的 JS 文件：

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 = cookies[i].trim();
            // 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');

const dragDrop = function (e) {
    e.preventDefault()
    
    const droppedElId = e.dataTransfer.getData('Text/html').split('__id-')[1]
    const request = new XMLHttpRequest()
    request.open('POST', '', true)
    request.setRequestHeader('X-CSRFToken', csrftoken)
    request.setRequestHeader('Content-Type', 'application/json')
    // request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8')
    request.send(JSON.stringify({
        "request_name":"change-extra-fields",
        "type":"increase",
        "id":droppedElId,
    }))
}

当我这样做时，request.POST 的查询字典为空。但是，如果我将Content-Type 标头更改为application/x-www-form-urlencoded，则请求有效，但它将所有内容放在同一个键上。

例子：

“应用程序/json”的结果：

<QueryDict: {}>

'application/x-www-form-urlencoded' 的结果：

<QueryDict: {'{"request_name":"change-extra-fields","type":"increase","id":"8"}': ['']}>

无论如何，我认为“应用程序/json”应该可以正常工作，但我不知道为什么不正常..

Answer 1

我觉得有错别字

request.setRequestHeader('Content-Type', 'application/json');

正如您在 cmets 中提到的，您的 post 请求需要您进行身份验证。

因此，您首先需要对站点进行身份验证/登录（也许使用另一个 Ajax 调用）。如果该站点支持 jwt/api 身份验证，您将获得一个令牌，您必须在下一个（发布）请求中将其与标头一起发送。应该是这样的

xhr.setRequestHeader('Authorization', 'Bearer arandombereartoken');

如果站点使用会话/cookie 身份验证，那么我建议考虑使用 jQuery 及其 Ajax 函数。 我这个this（第二个）应该会有所帮助。

更新：

如果您想以 application/json 形式获取数据，您必须查看请求正文

if request.method == "POST":
        print(request.body)

这会给你一个字节对象。如果你想要json，你已经将它加载到json。 request.POST 仅适用于 Content-Type 'application/x-www-form-urlencoded'