Ajax jQuery serialize() & serializeArray() textarea не отправляется в форме Django

У меня есть форма, я пытаюсь отправить данные через AJAX & jQuery в Django API. Отправка через Django admin работает нормально, но через форму, поле textarea вызывает проблемы. У меня есть аналогичная форма без текстового поля, и она работает нормально. Содержимое textarea не отправляется, и я не знаю почему. Вот форма:

<form id="addMaintenanceRecordsForm" action="">
    {% csrf_token %}
    <div class="mb-3">
        <div class="row">
            <div class="col-md-12">
                <label>Title <span style="color: #dd0000;">*</span></label>
                <input type="text" class="form-control" name="maintenance_title" placeholder="Enter Title" id="mr-title" required>
            </div>
        </div>
    </div>
    <div class="mb-3">
        <div class="row">
            <div class="col-md-12">
                <label>Details <span style="color: #dd0000;">*</span></label>
                <textarea class="form-control" id="mr-summary" name="summary" placeholder="Describe the nature of maintenance repair..." rows="3" required></textarea>
            </div>
        </div>
    </div>
    <div class="mb-3">
        <div class="row">
            <div class="col-md-12">
                <label>Repair Status <span style="color: #dd0000;">*</span></label>
                <select class="form-select" name="repair_status" id="mr-status" aria-label="Default select example" placeholder="Repair Status" required>
                    <option selected disabled>Choose...</option>
                    <option value="Complete">Complete</option>
                    <option value="Ongoing">Ongoing</option>
                </select>
            </div>
        </div>
    </div>
     
    <button type="submit" class="btn btn-soft-primary btn-sm" id="mr-create">Create New Record</button>
    <button type="button" class="btn btn-soft-secondary btn-sm">Cancel</button>
</form>

Это мой код jQuery

$(function() { 
        $('#addMaintenanceRecordsForm').on('submit', function(e) { 
            e.preventDefault();

            console.log($("#addMaintenanceRecordsForm").serializeArray());

            let url = "http://127.0.0.1:8000/api/maintenance/add/";

            $.ajax({
                type : 'POST',
                url : url,
                data : $("#addMaintenanceRecordsForm").serializeArray(),
                dataType: "json",
                success: function(data){
                    alert("New Maintenance Records Added!");
                    location.reload();
                },
                error:function(data){
                    alert("Maintenance Records Not Added!");
                    location.reload();
                }
            });

        });
    });

Я продолжаю получать эту ошибку:

Bad Request: /api/maintenance/add/
POST http://127.0.0.1:8000/api/maintenance/add/ 400 (Bad Request)

На консоли я получаю следующее:

{
    "name": "csrfmiddlewaretoken",
    "value": "jZ7Y2WrJB67xrkP34U53ngf11cu4ju1nvzlQ29Krtqv5ehkjuami0uwvyCrFdXAs"
}
{
    "name": "maintenance_title",
    "value": "Pipe Leakages"
}
{
    "name": "summary",
    "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
{
    "name": "repair_status",
    "value": "Ongoing"
}

И django CMD я получаю обратно такой словарь

<QueryDict: {'csrfmiddlewaretoken': ['LmbrIAnh7fJcAjjQ0hnEiwSujdFTJfLgXWpjINGZZz7KngO6qxETVK9YQDCuDIkl'], 'maintenance_title': ['Pipe Leakages'], 'summary': ['Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'], 'repair_status': ['Ongoing']}>

Я пробовал другие решения, такие как: 

data : $("#addMaintenanceRecordsForm").serialize(),

или

data : $("#addMaintenanceRecordsForm input, #addMaintenanceRecordsForm textarea").serializeArray(),

или

data : $("#addMaintenanceRecordsForm").find('input', 'select').serializeArray(),

или

$('#mr-create').on('click', function(e) { 
    e.preventDefault();

Но все они, похоже, не работают. В чем может быть проблема того, что textarea не сериализуется?

В своем коде вы показываете, что печатаете форму в консоль следующим образом:

console.log($("#addMaintenanceRecordsForm").serializeArray());

Вы сказали, что это приводит к такому выводу:

{
    "name": "csrfmiddlewaretoken",
    "value": "jZ7Y2WrJB67xrkP34U53ngf11cu4ju1nvzlQ29Krtqv5ehkjuami0uwvyCrFdXAs"
}
{
    "name": "maintenance_title",
    "value": "Pipe Leakages"
}
{
    "name": "summary",
    "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
{
    "name": "repair_status",
    "value": "Ongoing"
}

Если это JSON API, использующий Django REST, вам все равно понадобится структура, похожая на эту:

{
    "csrfmiddlewaretoken": "jZ7Y2WrJB67xrkP34U53ngf11cu4ju1nvzlQ29Krtqv5ehkjuami0uwvyCrFdXAs",
    "maintenance_title": "Pipe Leakages",
    "summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    "repair_status": "Ongoing"
}

Причина, по которой вы получаете 400 Bad Request, заключается в том, что JSON, который вы отправляете, не имеет ключей на верхнем уровне для каждого из этих полей, что означает, что Django REST не может найти их.

Я бы посоветовал посмотреть, что на самом деле делает serializerArray, так как это может быть не то, что вы ищете.

Вместо этого я бы предложил сконструировать объект JSON в JavaScript, используя значения из каждого поля формы, например:

{
   "maintenance_title": $("#mr-title").value(),
   "repair_status": $("#mr-status").value()
}

Или, возможно, попробуйте снова использовать ".serialize()" и посмотреть, что он выведет в консоль. Тот факт, что вы получаете Bad Request и он говорит, что все поля отсутствуют, означает, что это происходит не только с Textarea.

Для проверки создайте свой собственный объект в Postman, похожий на тот, что есть у меня, и посмотрите, исчезнут ли ошибки.

Вернуться на верх