Bootstrap 模态表单发布两次 Django

我正在按照以下指示进行操作django-bootstrap-modal-forms django-bootstrap-modal-forms https://pypi.org/project/django-bootstrap-modal-forms/我发现当我提交表单时，我的表单被发布或提交了两次。首先，该对象只是被创建了两次，我可以从管理员那里看到这一点。现在看来表单正在创建对象，但也进入其验证状态，如果表单成功（事实确实如此），我显然不希望出现这种状态。

有人经历过这个吗？除了我链接到的文档中概述的内容之外，我什么也没做，而且我无法确定为什么应该提交两次。

这是我的代码：

首页.html

<a href="#" class="create-shipment dropdown-itemcreatenew" onclick="closeNav()">Shipment</a>

<div class="modal fade" tabindex="-1" role="dialog" id="modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">

    </div>
  </div>
</div>

<script>
$(document).ready(function() {

    $(".create-shipment").modalForm({
        formURL: "{% url 'CreateShipmentView' %}"
    });

});
</script>

views.py

class CreateShipmentView(BSModalCreateView):
    template_name = 'create_shipment.html'
    form_class = CreateShipmentForm
    success_message = 'Success: Shipment Has Been Created!'
    success_url = reverse_lazy('HomeView')

create_shipment.html（模态表单模板）

{% load crispy_forms_tags %}
<form method="post" action="">
  {% csrf_token %}

 <div class="modal-header">
    <h5 class="modal-title">Create New Shipment</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="modal-body">
    {{form|crispy}}
  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="submit-btn btn btn-primary">Create</button>
  </div>

</form>

forms.py

class CreateShipmentForm(BSModalForm):
    class Meta:
        model = Shipment
        fields = ['Reference_Number', 'Ultimate_Consignee']

urls.py

url(r'^create_shipment/', views.CreateShipmentView.as_view(), name='CreateShipmentView'),

提交按钮上的事件侦听器

 // Add click listener to the submitBtn
    var ajaxSubmit = function (modalID, modalContent, modalForm, formURL, errorClass, submitBtn) {
        $(submitBtn).on("click", function () {
            // Check if form.is_valid() via ajax request when submitBtn is clicked
            isFormValid(modalID, modalContent, modalForm, formURL, errorClass, submitBtn, submitForm);
        });
    };

    // Check if form.is_valid() & either show errors or submit it
    var isFormValid = function (modalID, modalContent, modalForm, formURL, errorClass, submitBtn, callback) {
        $.ajax({
            type: $(modalForm).attr("method"),
            url: $(modalForm).attr("action"),
            // Serialize form data
            data: $(modalForm).serialize(),
            success: function (response) {
                if ($(response).find(errorClass).length > 0) {
                    // Form is not valid, update it with errors
                    $(modalID).find(modalContent).html(response);
                    $(modalForm).attr("action", formURL);
                    // Reinstantiate click listener on submitBtn
                    ajaxSubmit(modalID, modalContent, modalForm, formURL, errorClass, submitBtn);
                } else {
                    // Form is valid, submit it
                    callback(modalForm);
                }
            }
        });
    };

更新到这篇文章：似乎软件包已更新并且原始问题已解决，因此此答案中的链接将不再指向您正确的代码/注释。如果您仍然遇到同样的问题，请先尝试升级软件包。

读完后源代码 https://github.com/trco/django-bootstrap-modal-forms/blob/master/bootstrap_modal_forms/static/js/jquery.bootstrap.modal.forms.js对于包裹，我认为后端收到两个请求是正常的。

你的代码

$(document).ready(function() {

    $(".create-shipment").modalForm({
        formURL: "{% url 'CreateShipmentView' %}"
    });

});

触发函数modalForm你的选择（formURL）并分配函数newForm到一个点击事件。

然后在newForm它调用函数的函数addListeners将点击事件绑定到模态中的提交按钮，事件调用如下：

isFormValid(modalID, modalContent, modalForm, formURL, errorClass, submitBtn, submitForm);

注意最后一个参数submitForm指向以下函数

var submitForm = function(modalForm) {
      $(modalForm).submit();
    };

最后在函数中isFormValid，您在表单中输入的所有数据都将发布到您在表单中定义的 urlaction属性进行验证，如果没有错误，表单将提交到完全相同的 url。

如果你深入研究这个包中的 python 代码，事情就会变得有趣。这BSModalForm基于两个类mixins.py and in here https://github.com/trco/django-bootstrap-modal-forms/blob/master/bootstrap_modal_forms/mixins.py#L40它表示当请求是由 ajax 以外的任何方式发出时，保存使用表单数据创建的实例，否则（如果由 ajax 调用请求）不保存实例并返回它。这就是为什么它首先验证表单但不应该保存它（记住第一个调用确实是通过使用 jQuery 中的 ajax 调用发起的）。

您提到表单被保存两次 - 尝试在保存函数的开头添加一行：

print(request.is_ajax())

然后检查输出。可能是呼叫无法作为 AJAX 呼叫发送。 （如果是这种情况，请更新您的jquery版本或使用其他东西来进行调用，例如axios）

如果你不喜欢事情发生的方式，有几个选择（在 MIT 许可证下打包）：

1. 改变save函数来验证实例，然后将其保存为普通的 django 保存函数，但这涉及更改一些 JS 代码。

2. 创建一个API端点来接收数据并使用json进行通信，而不是每次都返回html代码（我想这也是作者以当前方式编写JS的原因，因为这样你就会面临渲染问题）。由于目前您在提交表单后不需要执行任何其他操作，因此返回实例不再有意义。 （不需要 DRF，因为 django 内置了一个 JsonResponse 类，并且如果您只需要这一个端点）

3. 直接使用BootStrap，因为这里的故事相当简单：页面上的模态，触发模态的按钮，模态中的表单，然后您可以提交它。您可能需要编写一些自己的 JS 来显示错误，但这仍然比更改现有包更容易。

一个例子

# forms.py
from django import forms


# use django ModelForm for creating the form based on model
class CreateShipmentForm(forms.ModelForm):
    class Meta:
        model = Shipment
        fields = ['Reference_Number', 'Ultimate_Consignee']

用于呈现表单 (GET) 和接收表单提交 (POST) 的视图

# views.py
from yourapp.forms import CreateShipmentForm
from django.shortcuts import render


def create_shipment_view(request):
    # http POST request means that the form was submitted
    if request.method == 'POST':
        # create the form and map the data to CreateShipmentForm
        shipment_form = CreateShipmentForm(request.POST)
        # based on your design of the form/modal, validate the data passed into the form
        if shipment_form.is_valid():
            # create a new shipment object
            new_shipment = shipment_form.save()
            # form processing is finished now do something to alert user, for example redirect the user to the success page
            return redirect('success')
        # if the form is not valid, then shipment_form.errors contain all the errors
    else:
        # for all other accessing methods including GET
        # create an empty form
        shipment_form = CreateShipmentForm()
    
    # if the request was POST, the form contains errors, if request was GET, it's an empty form
    return render(request, 'path/to/template.html', {
        'form': shipment_form
    })

最后，在模板中，您可以像平常一样显示表单。如果您不知道或需要表单的其他功能，请继续使用脆皮表单。

check if shipment_form.errors如果您想向用户显示错误，请将其显示在您的模板中。