用ajax提交多个form表单

Posted 2023-05-07

用ajax提交多个form表单,例如
<form name="form1" action="XXXX" method="post">
<input..>
<input ..>
.
.
</form>
<form name="form2" action="XXXX" method="post">
<input..>
<input ..>
.
.
</form>

<form name="form3" action="XXXX" method="post">
<input..>
<input ..>
.
.
</form>
用ajax提交这些表单。。怎么实现呢

参考技术A 隐藏一个<iframe name="ajaxFrame">，然后<form>设置target="ajaxFrame"，这样可以把表单指向iframe，达到当前页面不刷新的效果 参考技术B 用jquery来实现很容易。

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

【中文标题】Django - AJAX - 如何提交多个表单？

【英文标题】：Django - AJAX - how to submit multiple forms?

【发布时间】：2019-01-08 11:13:37

【问题描述】：

这是我的两个表单的两个 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 按钮之一应该会导致将数据保存到数据库中的每个相应表中。但是如果我点击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 的值是空的。

【问题讨论】：

您的 javascript 仅提交表单一。第二个函数只提交表单 1。当 form_1 有效时，您的代码返回响应。 form_2 验证不会触发。您应该只运行这些函数，而不是在每个函数保存后立即返回响应。此外，您的 form_2.is_valid() 正在保存表单 1 而不是表单 2

【参考方案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>