使用jQuery通过类选择元素实现Django Ajax功能失败问题排查

核心问题：事件绑定错误 #

你给.fix-button绑定了submit事件，但HTML里的元素是<button>而非<form>——submit事件仅在表单提交时触发，按钮本身不会触发这个事件，导致Ajax代码根本没执行。

• 修复：把事件改成click，按钮点击事件才是正确的触发方式。

其他细节问题及修复 #

1. datatype拼写错误
   jQuery的Ajax参数是驼峰命名，代码里的datatype: 'json'要改成dataType: 'json'（注意大写T），否则无法正确解析返回的JSON数据。

2. CSRF令牌获取不稳定
   如果页面里没有单独的<input name="csrfmiddlewaretoken">，原选择器会拿不到值。更稳妥的写法是：

   csrfmiddlewaretoken: $('[name=csrfmiddlewaretoken]').val()
   

   同时要确保页面里存在CSRF令牌，比如在模板里添加{% csrf_token %}（通常放在页面顶部或表单内）。

3. 状态更新元素的通用性问题
   原代码里document.getElementById("fixed_bool")假设页面只有一个状态元素，但如果是多个自动生成的issue实例，这个id会重复。建议给每个状态元素绑定和issue id关联的标识，比如：

   <span id="fixed-{{ issue.id }}">{{ issue.fixed }}</span>
   

   然后在Ajax的success回调里，根据当前按钮的value更新对应元素：

   $('#fixed-' + issueId).html(json['result']);
   

修复后的完整代码 #

JavaScript #

$(document).ready(function() {
    $('.fix-button').on('click', function(event) {
        event.preventDefault();

        var $button = $(this);
        var issueId = $button.val();

        $.ajax({
            url: '{% url "fix_issue" %}',
            type: 'POST',
            dataType: 'json',
            data: {
                issueid: issueId,
                csrfmiddlewaretoken: $('[name=csrfmiddlewaretoken]').val(),
                action: 'post'
            },
            success: function (json) {
                $('#fixed-' + issueId).html(json['result']);
                console.log(json);
            },
            error: function (xhr, errmsg, err) {
                console.error('请求出错:', errmsg, err);
            }
        });
    });
});

HTML #

{% csrf_token %}

<button class="fix-button" value="{{ issue.id }}">Fix</button>
<span id="fixed-{{ issue.id }}">{{ issue.fixed }}</span>

views.py（简化版） #

def FixView(request):
    if request.POST.get('action') == 'post':
        issue_id = int(request.POST.get('issueid'))
        issue = get_object_or_404(Issue, id=issue_id)
        issue.fixed = not issue.fixed
        issue.save()
        return JsonResponse({'result': str(issue.fixed)})
    return JsonResponse({'error': '无效请求'}, status=400)

内容的提问来源于stack exchange，提问作者NicholasM