使用django中的ajax动态添加多个表单时遇到一些问题。我使用ajax向服务器发送添加表单的请求,并在视图中有一个名为“add_another”的按钮来实现。每当用户点击此按钮时,计数就会增加,并且请求通过ajax发送到服务器(在我的django视图中)。

以下是我页面显示的表单代码:
trial_balance.html

<script>
        $(document).ready(function(){
            $("#add_another").click(function(){
                count = {{ formcount }};
                count++;
                alert(count);       
                $.ajax({
                    url: "/report/trial-balance",
                    data: { 'mycount' : count}
                }).done(function() {
                    alert("DONE");
                    }).fail(function() {
                    alert("FAIL");
                    });
                 });

        });
    </script>
    <div>
    <form action="" method="POST"> {% csrf_token %}
        {{ myformset.as_p }}
        <button id="add_another">add another</button>
        <input  type = "submit"  value = "See Results" id = "daterangeresult">

    </form>

视图代码:

def trial_balance(request):
    formcount = 1
    if request.is_ajax():   
        count = request.POST.get('mycount', formcount)              
        formcount = count
    myformset = formset_factory(DateRangeForm,extra=formcount)
    if request.method == "POST":
        f = myformset()
        if f.is_valid():  
    else:
        f = myformset()
    args['formcount'] = formcount
    args['myformset'] = f
    return render(request, 'trial_balance.html', args)

当我点击“add_another”按钮时,我总是会收到失败的警报,并且在从views.py打印formcount的值时,我总是得到值1,即使点击了按钮。

2、解决方案

经过学习和研究,我发现了一个解决这个问题的方案。

1.确保使用正确的jQuery版本和正确的ajax调用方法。在你的代码中,你使用了$.ajax()方法来发送ajax请求,这个方法已经被弃用,建议使用$.post()$.get()方法来代替。

2.确保在ajax请求中正确设置数据格式。在你的代码中,你使用了data: { 'mycount' : count}来发送数据,但它应该使用data: { mycount: count }这种格式。

3.确保在ajax请求中正确设置请求类型。在你的代码中,你使用了type: "POST",但它应该使用type: "GET"。因为你是在向服务器发送数据,而不是从服务器获取数据。

4.确保在ajax请求中正确设置请求头。在你的代码中,你没有设置任何请求头,但你应该设置Content-Type请求头,以告诉服务器你正在发送的数据类型。

5.确保在ajax请求中正确处理服务器的响应。在你的代码中,你使用了done()fail()方法来处理服务器的响应,但你应该使用success()error()方法来代替。

以下是修改后的代码:
trial_balance.html

<script>
        $(document).ready(function(){
            $("#add_another").click(function(){
                count = {{ formcount }};
                count++;
                alert(count);       
                $.post({
                    url: "/report/trial-balance",
                    data: { 'mycount' : count},
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                }).success(function() {
                    alert("DONE");
                    }).error(function() {
                    alert("FAIL");
                    });
                 });

        });
    </script>

views.py

def trial_balance(request):
    formcount = 1
    if request.method == 'POST':
        count = request.POST.get('mycount', formcount)
        formcount = count
    myformset = formset_factory(DateRangeForm,extra=formcount)
    if request.method == "POST":
        f = myformset()
        if f.is_valid():  
    else:
        f = myformset()
    args['formcount'] = formcount
    args['myformset'] = f
    return render(request, 'trial_balance.html', args)

通过这些修改,你应该能够成功使用ajax在django中动态添加多个表单集。

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐