jquery, ajax: 多个 post-requests 而不是一个

Question

我正在使用 django 和 jQuery，我尝试在提交后更改按钮视图而不重新加载页面。当我第一次按下它时一切正常，但第二次按下导致两个 POST 请求，第三次到三个等等，按钮不再改变。尽管数据库中的数据会随着每次按下按钮而发生变化。

请帮我找出我的 jquery 代码有什么问题以及如何防止发布请求乘法

 function send()
{
    $('.valid').submit(function() 
        {
            var a_id = $(this).attr('a_id');
            var vl = $(this).attr('vl');
            $.ajax(
            { 
                        data: {'a_id' : a_id},
                        type: 'POST', 
                        url: 'vl/', 
                        success: function(data, status) 
                        { 
                            $('#mark_'+a_id).html('<i class="icon-white icon-ok"></i> Correct!')
                            $('#mark_'+a_id).attr("id",'cor_'+a_id);        

                            $('#cor_'+a_id).html('Not correct')
                            $('#cor_'+a_id).attr("id",'mark_'+a_id);

                        },
                        error: function(xhr, data) 
                        {
                            alert('fail: ' + data +' answer #'+ a_id);
                        }           
            });

        });

}

a_id 用于回答 id，它来自模板中的按钮

{% if answer.validity %}

<button id="cor_{{ answer.id }}" class="btn btn-inverse js-mark " a_id="{{answer.id}}"  onclick = "send()" ><i class="icon-white icon-ok"></i> Correct answer</button>

{% else %} 

<button id="mark_{{ answer.id }}" class="btn btn-inverse js-mark" a_id="{{answer.id}}" onclick = "send()" >Mark this answer as correct</button>

{% endif %}

views.py 部分：

def question_vl(request, question_id):
    context_instance=RequestContext(request)
    question = get_object_or_404(Question, pk=question_id)

    if request.user == question.author:
        if request.method == 'POST':
            if(request.POST.get('a_id')): 
                        a = Answer.objects.get(pk=request.POST.get('a_id'))
                        if a.validity==False:
                    a.validity = True
                else:
                    a.validity = False
                a.save()
        return HttpResponse("")

Answer 1

这一行

$('.valid').submit(function()

将提交事件附加到表单。因此，每当您按下按钮功能“发送”时，都会再次附加相同的事件。

修改你的按钮：

{% if answer.validity %}

<button class="btn btn-inverse js-mark" a_id="{{answer.id}}" onclick = "send(this)" ><i class="icon-white icon-ok"></i> Correct answer</button>

{% else %} 

<button class="btn btn-inverse js-mark" a_id="{{answer.id}}" onclick = "send(this)" >Mark this answer as correct</button>

{% endif %}

这样修改你的函数：

function send(button)
{
        button = $(button);
        var a_id = button.attr('a_id');
        $.ajax(
        { 
                    data: {'a_id' : a_id},
                    type: 'POST', 
                    url: 'vl/', 
                    success: function(data, status) 
                    { 
                        if (data.validity){
                           button.html('<i class="icon-white icon-ok"></i> Correct!')
                        } else {
                           button.html('Not correct!')
                        }     
                    },
                    error: function(xhr, data) 
                    {
                        alert('fail: ' + data +' answer #'+ a_id);
                    }           
        });

}

您的服务器端脚本应返回具有“有效性”实际值的 JSON 数据