如何在单个 Django 视图中进行两个或多个 AJAX 调用答案

【问题标题】：How to make two or more AJAX calls in a single Django view如何在单个 Django 视图中进行两个或多个 AJAX 调用
【发布时间】：2020-05-26 07:09:36
【问题描述】：

我正在开发个人消费日记，但我遇到了这个问题。

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

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

我正在尝试解决这个问题 3 天。

大家有什么建议吗？

这是我的

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',)

这里是满满的

views.py



    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>

这里是
ajax 表单

     $('#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
          });
        });

【问题讨论】：

请您分享负责处理两个 ajax 调用的两个完整视图吗？（不仅是 if request.method == 'POST'）
怎么了？代码似乎还可以。在控制台中运行时是否收到任何错误消息？
@revliscano 我加载了完整的views.py
@furas 代码没问题，但第一个表单可以正常工作。第二种形式的 Ajax 有效，但视图无效。
你有第二个表单的分离视图吗？在 dashboard 中，您不检查使用了哪个表单，因此它始终只首先运行 if request.method == 'POST': 或者您必须检查发送给查看的值，然后决定执行哪部分代码。

标签： javascript python html django ajax

【解决方案1】：

解决方案

为具有相同名称/ID 的两个表单创建一个隐藏的input。例如HTML

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

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

相应地更新JavaScript。

然后在您的视图中通过 -

捕获每个表单

# 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

【讨论】：