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，我也不知道为什么。但是它仍然保存到数据库。

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

理想情况下，单击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>

Django-AJAX-如何提交多种表格？

1 个答案: