Javascript 如何在一个Django视图中进行两个或多个AJAX调用

我正在开发个人消费日记，我面临着这个问题

为了更好的用户体验，我需要在不重新加载页面的情况下添加新项目

我制作一个ajax表单，但我需要两个

我花了三天时间试图解决这个问题

有人有什么建议吗

这是我的

forms.py

     class AddIncome(forms.ModelForm):
        class Meta:
            model = Income
            fields = ( 'title','value',)    

    class AddExpence(forms.ModelForm):
        class Meta:
            model = Expence
            fields = ( 'title_exp','value_exp',)

    def dashboard(request):
    if request.method == 'POST':
        if request.is_ajax():
            addincome = AddIncome(request.POST)
            if addincome.is_valid():
                addincome.cleaned_data
                addincome.save()
                latest = Income.objects.latest('id').id
                income_object = model_to_dict(Income.objects.get(pk=latest))
                return JsonResponse({'error': False, 'data': income_object})
            else:
                print(addincome.errors)
                return JsonResponse({'error': True, 'data': addincome.errors})
        else:
            error = {
                'message': 'Error, must be an Ajax call.'
            }
            return JsonResponse(error, content_type="application/json")

    if request.method == 'POST':
        if request.is_ajax():
            addexpence = AddExpence(request.POST)
            if addexpence.is_valid():
                addexpence.cleaned_data
                addexpence.save()
                latest = Expence.objects.latest('id').id
                expence_object = model_to_dict(Expence.objects.get(pk=latest))
                return JsonResponse({'error': False, 'data': expence_object})
            else:
                print(addexpence.errors)
                return JsonResponse({'error': True, 'data': addexpence.errors})
        else:
            error = {
                'message': 'Error, must be an Ajax call.'
            }
            return JsonResponse(error, content_type="application/json")
    else:
        addincome = AddIncome()
        addexpence = AddExpence()
        income = Income.objects.order_by('-date').filter(is_published=True)
        expence = Expence.objects.order_by('-date').filter(is_published=True)   
        data = {
            'addincome_html': addincome,
            'addexpence_html': addexpence,
            'income':income,
            'expence':expence
        }

        return render(request, template_name='main/dashboard.html', context=data)

这里已经满了

视图.py

     class AddIncome(forms.ModelForm):
        class Meta:
            model = Income
            fields = ( 'title','value',)    

    class AddExpence(forms.ModelForm):
        class Meta:
            model = Expence
            fields = ( 'title_exp','value_exp',)

    def dashboard(request):
    if request.method == 'POST':
        if request.is_ajax():
            addincome = AddIncome(request.POST)
            if addincome.is_valid():
                addincome.cleaned_data
                addincome.save()
                latest = Income.objects.latest('id').id
                income_object = model_to_dict(Income.objects.get(pk=latest))
                return JsonResponse({'error': False, 'data': income_object})
            else:
                print(addincome.errors)
                return JsonResponse({'error': True, 'data': addincome.errors})
        else:
            error = {
                'message': 'Error, must be an Ajax call.'
            }
            return JsonResponse(error, content_type="application/json")

    if request.method == 'POST':
        if request.is_ajax():
            addexpence = AddExpence(request.POST)
            if addexpence.is_valid():
                addexpence.cleaned_data
                addexpence.save()
                latest = Expence.objects.latest('id').id
                expence_object = model_to_dict(Expence.objects.get(pk=latest))
                return JsonResponse({'error': False, 'data': expence_object})
            else:
                print(addexpence.errors)
                return JsonResponse({'error': True, 'data': addexpence.errors})
        else:
            error = {
                'message': 'Error, must be an Ajax call.'
            }
            return JsonResponse(error, content_type="application/json")
    else:
        addincome = AddIncome()
        addexpence = AddExpence()
        income = Income.objects.order_by('-date').filter(is_published=True)
        expence = Expence.objects.order_by('-date').filter(is_published=True)   
        data = {
            'addincome_html': addincome,
            'addexpence_html': addexpence,
            'income':income,
            'expence':expence
        }

        return render(request, template_name='main/dashboard.html', context=data)

这是 页面表单

    <form  method="POST" name="create_incomefrm" id="create_incomefrm" action="{% url 'create_income_record' %}">
            {% csrf_token %}
            {{ addincome_html.as_p }
            <button type="submit" id="popup-button-2" class="dashboard__popup-button" 
           name="createincomefrmbtn">Add <span>&rarr;</span></button>    
     </form>



     <form  method="POST" name="create_expencefrm" id="create_expencefrm" action="{% url 'create_expence_record' %}">
                {% csrf_token %}
            <div class="dashboard__popup-2" id="dashboardpopup-4">       
                {{ addexpence_html.as_p }}  
    <button id="popup-button-3" name="createexpencefrmbtn" class="dashboard__popup-button">Add<span>&rarr;</span></button>    
  </form>

     $('#create_incomefrm').submit(function (e) {
        e.preventDefault();
        var formData = {
            'title': $('#id_title').val(),
            'value': $('#id_value').val(),
            csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
            contentType: 'application/x-www-form-urlencoded',
            encode: true,
        };
        $.ajax({
            type: 'POST',
            url: 'create/',
            data: formData,
            dataType: 'json',
        }).done(function (data) {
           //code
          });
        });


     $('#create_expencefrm').submit(function (e) {
        e.preventDefault();
        var formData = {
            'title_exp': $('#id_title_exp').val(),
            'value_exp': $('#id_value_exp').val(),
            csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
            contentType: 'application/x-www-form-urlencoded',
            encode: true,
        };
        $.ajax({
            type: 'POST',
            url: 'create_exp/',
            data: formData,
            dataType: 'json',
        }).done(function (data) {
            //code
          });
        });

---

解决方案

# form-1
if request.method == 'POST' and request.POST['form_type'] == 'income':
    # rest of your code

# form-2
if request.method == 'POST' and request.POST['form_type'] == 'expense':
    # rest of your code

为两个具有相同名称/id的表单创建一个隐藏的

输入

。例如HTML

<!--form-1-->
<input type='hidden' name='form_type' value='income'>

<!--form-2-->
<input type='hidden' name='form_type' value='expense'>

---

请分享负责处理这两个ajax调用的两个完整视图？（不仅仅是if

request.method==“POST”

）怎么了？代码似乎没问题。在控制台中运行时是否收到任何错误消息？@revliscano我加载了完整视图。py@furas代码还可以，但是第一个表单可以正常工作。第二个表单可以使用Ajax，但视图不能。第二个表单有单独的视图吗？在

仪表板中

您不检查使用了哪个表单，因此如果request.method=='POST'：它总是首先运行，否则您必须检查发送给查看的值，然后决定执行代码的哪个部分。