javascript - 如何在单个 Django View 中进行两个或多个 AJAX 调用

Question

我正在开发个人支出日记，但遇到了问题。

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

我制作了单个 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',)

这里已满

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
          });
        });

Answer 1

解决方案

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

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

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

相应地更新 JavaScript。

然后在您的 View 中捕获每个表单 -

# 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