Django - AJAX - 如何提交多个表单？

Question

这是我的两个表格的两个ajax代码。除了按钮ID之外，这两个代码完全相同

$("#form_1_submit").on('click', function (e) {

    e.preventDefault();
    var form = $(this).closest("form");
    var data = form.serializeArray();

    $.ajax({
        url: "",
        dataType:"json",
        type: "POST",
        data: data,
        success: function() {
            alert('ajax request')
        },
        error: function() {
            alert("error")
        }

    });

    console.log(form.html())

});
$("#form_1_submit").on('click', function (e) {

    e.preventDefault();
    var form = $(this).closest("form");
    var data = form.serializeArray();

    $.ajax({
        url: "",
        dataType:"json",
        type: "POST",
        data: data,
        success: function() {
            alert('ajax request')
        },
        error: function() {
            alert("error")
        }

    });

    console.log(form.html())

});

这是我的views.py：

class BHA_UpdateView(UpdateView):

    model = Different_Model
    fields = '__all__'

    def post(self, request, **kwargs):

        if self.request.is_ajax():
            print(self.request.POST)


        form_1 = Form_2(request.POST, instance=Model_1.objects.filter(#some_filtering...)
        form_2 = Form_1(request.POST, instance=Model_2.objects.filter(#some_filtering...)

        if form_1.is_valid():
            form_1.save()
            return super().post(request, **kwargs)

        if form_2.is_valid():
            form_1.save()
            return super().post(request, **kwargs)

    return super().post(request, **kwargs)

有两个问题：

首先：$.axax({...})给error，而不是success，我不知道为什么。但它仍然保存到DB。

第二：提交一个表单导致另一个表单的值不保存到DB。这是我当前的页面：

理想情况下，单击其中一个Save按钮应该会将数据保存到DB中的每个相应表中。但如果我点击Save为Overall BHA，它会节省

{'bha_name': 'form_1', 'depth_in' : 'form_1', 'depth_out': 'form_1'},

但同时将其保存到我的数据库表Drill Bit：

{'bit_type': '', 'size': '', 'bit_model': ''}

清空表的存储值。

为什么会这样，我该如何解决？

++ form_1.is_valid()总是返回True。我认为这就是为什么form_2的价值观是空的。

Answer 1

您可以在单个HTML表单元素中呈现多个表单，并在没有ajax的情况下将它们全部提交

<form method="post">{% csrf_token %}
<div class="form-row">
    <div class="col-sm">{{ form_a.as_p }}</div>
</div>
<div class="form-row">
    <div class="col-sm">{{ form_b.as_p }}</div>
</div>
<div class="form-row">
    <div class="col-sm">{{ form_c.as_p }}</div>
</div>
 <button type="submit" class="save btn btn-default">Save</button>
</form>