Как отправить форму с помощью django ajax без разбора входных данных

У меня есть модальная форма, которую я использую, когда пользователям нужно создать что-то, не покидая страницу, на которой они находятся. И чтобы избежать обновления страницы после отправки модальной формы, я использую ajax для отправки формы.

По ряду причин я не могу разобрать форму поле за полем, поэтому я пытался найти способ получить все данные формы и отправить их с помощью "общего" подхода, а затем обработать пост-запрос в моем представлении (заполнить форму с помощью POST).

Однако, подход, который я использую, не работает, и я надеялся, что у кого-то есть альтернативная идея.

 <body>
    <!--Modal -->
    <div class="modal fade" tabindex="-1" role="dialog" id="modal">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
                <!-- Popup -->
                <div class="pop-up-form">
                    <div class="pop-up-form__wrp">

                        <!-- Title -->
                        <div class="pop-up-form__title-wrp">
                            <h2 class="pop-up-form__title">Create New</h2>
                        </div>
                        <!-- END Title -->

                        <!-- Form -->
                        <form class="pop-up-form__form" id="form">
                            {% csrf_token %}
                            {% for field in form %}
                                <div class="pop-up-form__input-wrp">
                                    <label class="pop-up-form__label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    {{ field|add_class:"pop-up-form__input" }}
                                    {% for error in field.errors %}
                                      <p class="help-block">{{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endfor %}
                        <!--
                        <div class="form-group{#% if field.errors %#}invalid{#% endif %#}"></div>
                        -->
                             <!-- BTNs -->
                            <div class="pop-up-form__btn-wrp">
                                <button data-dismiss="modal" class="btn-transparent">Close</button>
                                <button type="submit" form='form' class="btn-black">Save</button>
                            </div>
                            <!-- END BTNs -->
                        </form>
                        <!-- END Form -->

                    </div>
                </div>
                <!-- END Popup -->
          </div>
        </div>
    </div>
    <!--Modal -->
     </body>


<script> 
  $('#form').on('submit', function(e){

            e.preventDefault();
            console.log('I am getting called')
            $.ajax({
                    type: "POST",
                    url: "{{ post }}",
                    data: {
                        csrfmiddlewaretoken: "{{ csrf_token }}",
                        'data': $('form').serialize(),
                    },
                    success: function(response) {
                        console.log('success updated')
                        console.log(response)
                    }
                  });
        })
</script>

Я решил эту проблему, изменив подход. Вот окончательный html и js, которые я использую, а также код на представлениях для дереализации дереализованных данных 

 <body>
    <!--Modal -->
    <div class="modal fade" tabindex="-1" role="dialog" id="{{ modal_id }}">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
                <!-- Popup -->
                <div class="pop-up-form">
                    <div class="pop-up-form__wrp">

                        <!-- Title -->
                        <div class="pop-up-form__title-wrp">
                            <h2 class="pop-up-form__title">Create New</h2>
                        </div>
                        <!-- END Title -->

                        <!-- Form -->
                        <form class="pop-up-form__form" id="modalform">
                            {% csrf_token %}
                            {% for field in form %}
                                <div class="pop-up-form__input-wrp">
                                    <label class="pop-up-form__label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    {{ field|add_class:"pop-up-form__input" }}
                                    {% for error in field.errors %}
                                      <p class="help-block">{{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endfor %}
                        <!--
                        <div class="form-group{#% if field.errors %#}invalid{#% endif %#}"></div>
                        -->
                             <!-- BTNs -->
                            <div class="pop-up-form__btn-wrp">
                                <button data-bs-dismiss="{{ modal_id }}" class="btn-transparent">Close</button>
                                <button type="submit" form='modalform' class="btn-black">Save</button>
                            </div>
                            <!-- END BTNs -->
                        </form>
                        <!-- END Form -->

                    </div>
                </div>
                <!-- END Popup -->
          </div>
        </div>
    </div>
    <!--Modal -->
     </body>

<script>
        $('#modalform').on('submit', function(e){
            e.preventDefault();
            $.ajax({
                    type: "POST",
                    url: "{{ post }}",
                    data: {
                        csrfmiddlewaretoken: "{{ csrf_token }}",
                        'data': $('#modalform').serialize(),
                    },
                    success: function(response) {
                        console.log('success updated')
                        console.log(response)
                        $('{{update_id}}').selectize()[0].selectize.addOption(
                            [{'id': response['id'], 'title_name': response['title_name']}]
                        )
                        $('{{ update_id }}')[0].selectize.addItem(response['id']);
                         $("#{{ modal_id }}").modal('toggle');
                    }
                  });
        })
    </script>

 form_data = QueryDict(request.POST['data'].encode('ASCII'))  # Query strings use only ASCII code points so it is safe.
        title_form = TitleModalForm(form_data)
Вернуться на верх