0

我有一个模态表单，当用户需要在不离开他们所在页面的情况下创建内容时使用它。并且为了避免模态表单提交后刷新页面，我使用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>
4

1 回答 1

0

我解决了这种不断变化的方法。这是我正在使用的最终 html 和 js 以及视图上的代码，以取消实现 serealized 数据。

 <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)
于 2022-01-08T02:10:30.480 回答