Javascript 如何在POST中区分不同的AJAX函数？

我需要在django视图的POST方法中区分多个AJAX函数，以处理多个表单

背景：

<form method="post" action="{{ obj.get_my_url }}" class="form-a-ajax">
    {% csrf_token %} {{ form_A }}
    <button type='submit' id="mybtn-a" name='save_form_a' class='btn btn-success'>Save</button>
</form>

<form method="post" action="{{ obj.get_my_url }}" class="form-b-ajax">
    {% csrf_token %} {{ form_B }}
    <button type='submit' id="mybtn-b" name='save_form_b' class='btn btn-success'>Save</button>
</form>

<form method="post" action="{{ obj.get_my_url }}" class="form-c-ajax">
    {% csrf_token %} {{ form_C }}
    <button type='submit' id="mybtn-c" name='save_form_c' class='btn btn-success'>Save</button>
</form>

我以前在没有AJAX的情况下编写了这个视图，并且工作得很好。在Ajax之前，我可以通过添加name=“some\u button\u name”来区分每个表单的POST方法，如下所示：

if request.method == 'POST' and 'some_button_name' in request.POST: #check which form button submitted

这很好，但是如果我让它工作起来，AJAX可以让它变得更好。现在我不知道如何区分视图端的ajax函数

以下是我认为它应该如何工作（理论观点）：

。。。但是我被难住了。下面是我的（简化但结构准确）代码。它当然希望调用每个模型的save方法，而不管调用了哪个表单/ajax函数，因此保存表单C将破坏表单B，因为B的ajax处理程序没有执行任何操作或传递任何JSON

我已经浏览了ajax参数列表，但似乎无法使用它添加一些识别变量，以便在POST中的视图端捕获。。。还是有

如果有人能为解决这个问题提供一些线索，我将不胜感激。另外，我不确定它是否与这个问题相关，但我还想最终添加一个“saveall”按钮，该按钮触发所有ajax函数

视图.py

def update_view(request, slug):

    mymodel = Model.objects.get(slug=slug)

    form_A  = Model_A_Form(instance=mymodel.model_a)
    form_B  = Model_B_Form(instance=mymodel.model_b)
    form_C  = Model_C_Form(instance=mymodel.model_c)

    if request.method == 'POST': # using request.is_ajax(): here causes the same problem

        form_A = Model_A_Form(request.POST, instance=mymodel.model_a)
        if form_A.is_valid():
            form_A.save()
            return JsonResponse

        form_B = Model_B_Form(request.POST, instance=mymodel.model_b)
        if form_B.is_valid():
            form_B.save() 
            return JsonResponse

        form_C = Model_C_Form(request.POST, instance=mymodel.model_c)
        if form_C.is_valid():
            form_C.save() 
            return JsonResponse

    context = {

        'form_A': form_A,
        'form_B': form_B,
        'form_C': form_C,
        'obj': mymodel,
    }

    return render(request, "products/update_form.html", context)

.JS

<script>
    $(() => {

        // Form A handler

        $(function () {
            $('#mybtn-a').click(function () {
                var formA = $(".form-a-ajax")
                var formAMethod = formA.attr("method");
                var formAEndpoint = formA.attr("action");
                formA.submit(function (event) {
                    event.preventDefault();
                    var formAData = formA.serialize()
                    var thisForm = $(this)
                    $.ajax({
                        method: formAMethod,
                        url: formAEndpoint,
                        data: formAData,
                        success: function (data) {
                            $.alter({
                                title: "Success!",
                            })
                        },
                        error: function (error) {

                        }

                    }) //end ajax
                });//end click
            })
        })

        // Form B handler

        $(function () { 
            $('#mybtn-b').click(function () {
                var formB = $(".form-b-ajax")
                var formBMethod = formB.attr("method");
                var formBEndpoint = formB.attr("action")
                formB.submit(function (event) {
                    event.preventDefault();
                    var formBData = formB.serialize()
                    var thisForm = $(this)
                    $.ajax({
                        method: formBMethod,
                        url: formBEndpoint,
                        data: formBData,

                        success: function (data) {
                            $.alter({
                                title: "Success!",
                            })
                        },
                        error: function (error) {

                        }

                    }) // end ajax
                });//end click
            })
        })

        // Form C handler

        $(function () {
            $('#mybtn-c').click(function () {
                var formC = $(".form-c-ajax")
                var formCMethod = formC.attr("method");
                var formCEndpoint = formC.attr("action")
                formC.submit(function (event) {
                    event.preventDefault();
                    var formCData = formC.serialize()
                    var thisForm = $(this)
                    $.ajax({
                        method: formCMethod,
                        url: formCEndpoint,
                        data: formCData,

                        success: function (data) {
                            $.alter({
                                title: "Success!",
                            })
                        },
                        error: function (error) {

                        }

                    }) //end ajax
                });//end click
            })
        })

$(() => {
//组成一个处理程序
$（函数（）{
$（'#mybtn-a'）。单击（函数（）{
var formA=$（“.form-a-ajax”）
var formAMethod=形式属性（“方法”）；
var formAEndpoint=形式属性（“行动”）；
形式提交（功能（事件）{
event.preventDefault（）；
var formAData=formA.serialize（）
var thisForm=$（此）
$.ajax({
方法：表格法，
url:formAEndpoint，
数据：形式数据，
成功：功能（数据）{
美元兑换({
标题：“成功！”，
})
},
错误：函数（错误）{
}
})//结束ajax
})；//结束单击
})
})
//表格B处理程序
$（函数（）{
$（'#mybtn-b'）。单击（函数（）{
var formB=$（“.form-b-ajax”）
var formBMethod=formB.attr（“方法”）；
var formBEndpoint=formB.attr（“操作”）
表格B.提交（功能（事件）{
event.preventDefault（）；
var formBData=formB.serialize（）
var thisForm=$（此）
$.ajax({
方法：formb法，
网址：formBEndpoint，
数据：formBData，
成功：功能（数据）{
美元兑换({
标题：“成功！”，
})
},
错误：函数（错误）{
}
})//结束ajax
})；//结束单击
})
})
//表格C处理程序
$（函数（）{
$（'#mybtn-c'）。单击（函数（）{
var formC=$（“.form-c-ajax”）
var formCMethod=formC.attr（“方法”）；
var formCEndpoint=formC.attr（“操作”）
表单提交（功能（事件）{
event.preventDefault（）；
var formCData=formC.serialize（）
var thisForm=$（此）
$.ajax({
方法：formCMethod，
网址：formCEndpoint，
数据：formCData，
成功：功能（数据）{
美元兑换({
标题：“成功！”，
})
},
错误：函数（错误）{
}
})//结束ajax
})；//结束单击
})
})

模板：

<form method="post" action="{{ obj.get_my_url }}" class="form-a-ajax">
    {% csrf_token %} {{ form_A }}
    <button type='submit' id="mybtn-a" name='save_form_a' class='btn btn-success'>Save</button>
</form>

<form method="post" action="{{ obj.get_my_url }}" class="form-b-ajax">
    {% csrf_token %} {{ form_B }}
    <button type='submit' id="mybtn-b" name='save_form_b' class='btn btn-success'>Save</button>
</form>

<form method="post" action="{{ obj.get_my_url }}" class="form-c-ajax">
    {% csrf_token %} {{ form_C }}
    <button type='submit' id="mybtn-c" name='save_form_c' class='btn btn-success'>Save</button>
</form>

{%csrf_token%}{{form_A}}
拯救
{%csrf_token%}{{form_B}}
拯救
{%csrf_token%}{{form_C}}
拯救

谢谢大家的反馈！你们的评论给了我一个想法。我有一个可行的解决方案，事后看起来非常简单。在我的例子中，不需要在JSON中附加任何内容。我拥有的每个模型都有一些唯一的字段名；我只需要检查其中一个是否存在于键：值对的JSON对象中。这rks：

    if request.method == 'POST' and 'some_unique_model_field_name' in request.POST.keys():

        form_A = Model_A_Form(request.POST, instance=mymodel.model_a)
        if form_A.is_valid():
            form_A.save()
            return JsonResponse

        #rinse and repeat...

---

有几种方法可以做到这一点。您可以在每个表单中放置一个隐藏输入，并使用一个唯一的值来标识表单，也可以在序列化表单后在表单数据的末尾附加一个值，如

formCData+='&formName=c'

。是的，每个表单的隐藏输入都具有相同的名称和唯一的值！您还可以添加o ajax参数，例如：target:FormA，然后根据目标值进行切换……您可以将按钮type='submit'转换为输入type='submit'，输入相同的名称和不同的值，然后根据值在django中检查值。您只需选择表单谢谢大家的评论。我将尝试其中的一些解决方案。@Bilel，可以吗关于添加ajax参数，您有更多的详细信息吗？例如，在您的示例中，formAData具有序列化内容[data:formAData+“&target=FormA”]，然后对目标值进行切换或条件检查即可；）这假设您的ajax类型为“POST”。这里还可以使用jQuery参数