django form.is_valid 在使用 XMLHttpRequest 时返回 false答案

【问题标题】：django form.is_valid returns false when while using XMLHttpRequestdjango form.is_valid 在使用 XMLHttpRequest 时返回 false
【发布时间】：2021-11-08 10:20:57
【问题描述】：

因为 bootstrap 5 不再附带 jquery 并建议使用 vanilla javascript XMLHttpRequest() 来发出动态请求，这正是我在 django 中尝试做的。执行此操作的所有其他示例都使用传统的 .$ajax。我有一个基本的 javascript 函数：

function sendPhoneVerification(_phone) {
    var http = new XMLHttpRequest();
    const params = {
            phone: _phone
    }
    http.open('POST', '/approvephone/', true)
    http.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
    http.setRequestHeader('Content-type', 'application/json')
    http.setRequestHeader('phone', _phone)
    http.send(JSON.stringify(params))
    http.onload = function() {
        alert(http.responseText)
    }
}

CSRF 中间件令牌工作正常，但在视图中，form.is_valid() 返回 false，错误是缺少必填字段“电话”。我不知道我应该如何提供这个价值。被测试的表单是一个包含一个字段的简单表单

class AddPhoneForm(forms.Form):
    phone = PhoneNumberField()

视图的相关部分

@csrf_protect
@login_required
def approvephone(request):
    if request.method == 'POST':
        form = AddPhoneForm(request.POST)
        if form.is_valid()  #returns false and error is missing field "phone"

知道如何在 POST 响应中正确提供电话字段以使 django 开心吗？

【问题讨论】：

标签： javascript django django-views django-forms xmlhttprequest

【解决方案1】：

好的，我觉得很愚蠢，但是在 django 中，您需要发送 'Content-type', 'application/x-www-form-urlencoded'，如此处所述 https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send

function sendPhoneVerification(_phone) {
    alert("Hello! I am an alert box!!" + _phone);
    var http = new XMLHttpRequest();
    http.open('POST', '/approvephone/', true)
    http.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
    http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
    http.send("phone="+_phone)

    http.onload = function() {
        alert(http.responseText)
    }

【讨论】：