Django form.is_valid возвращает false при использовании XMLHttpRequest

Поскольку bootstrap 5 больше не поставляется с jquery, рекомендуется использовать ванильный 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 middlware работает нормально, но в представлении form.is_valid() возвращает false и ошибка заключается в том, что отсутствует обязательное поле "phone". Я не могу понять, как я должен предоставить это значение. Тестируемая форма - это простая форма с одним полем

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 счастливым?

ok Я чувствую себя глупо, но в 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)
    }
Вернуться на верх