AJAX重复调用Django视图函数问题求助

问题根源 #

你遇到的重复提交问题，核心原因是每次调用delete_function时，都会给document绑定一个新的submit事件监听函数。第一次删除时绑定1个，第二次删除时又新增1个，以此类推，导致后续每次触发submit事件时，所有之前绑定的函数都会执行，从而重复发送AJAX请求，后端视图就会被多次调用。

修复方案 #

最直接的解决方法是去掉不必要的document事件绑定，直接在删除按钮的点击事件中发送AJAX请求即可，不需要通过表单提交触发。修改后的delete_function如下：

// 向后端(Django)发送表单，成功时调用jsonToDict()
function delete_function(input_key, csrf_token){
    // 直接发送AJAX请求，无需绑定document的submit事件
    $.ajax({
        type: 'POST',
        url: '/posted/delete/',
        data:{
            item_id: input_key.value,
            projectURL: projectURL_,
            csrfmiddlewaretoken: csrf_token,
        },
        success: function (data){
            jsonToDict(data, "update_delete_form");
        }
    });
}

补充说明 #

如果你的业务逻辑确实需要依赖表单提交事件，也可以做以下优化：

1. 给特定表单绑定事件：不要绑定到全局的document，而是绑定到当前操作的表单元素，避免影响其他表单，同时每次绑定前先解绑旧事件：

function delete_function(input_key, csrf_token, form){
    // 先解绑表单的submit事件，再绑定新的
    $(form).off('submit').on('submit', function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '/posted/delete/',
            data:{
                item_id: input_key.value,
                projectURL: projectURL_,
                csrfmiddlewaretoken: csrf_token,
            },
            success: function (data){
                jsonToDict(data, "update_delete_form");
            }
        });
    });
    // 手动触发表单提交
    $(form).submit();
}

调用时把form参数传进去：

$( del_btn ).on('click', function(e) {
    delete_function(input_key, csrf_token, form);
});

2. 使用一次性事件绑定：如果只需要表单提交一次，可以用one代替on，这样事件只会执行一次：

$(form).one('submit', function(e){
    // 逻辑同上
});

额外优化建议 #

• 删除操作完成后，可以移除对应的列表项和删除按钮，避免无效元素残留
• 可以在AJAX请求发送时禁用删除按钮，防止用户重复点击（虽然当前问题不是点击重复，但能提升体验）：

function delete_function(input_key, csrf_token){
    const $delBtn = $(this); // 指向当前点击的删除按钮
    $delBtn.prop('disabled', true); // 禁用按钮
    $.ajax({
        type: 'POST',
        url: '/posted/delete/',
        data:{
            item_id: input_key.value,
            projectURL: projectURL_,
            csrfmiddlewaretoken: csrf_token,
        },
        success: function (data){
            jsonToDict(data, "update_delete_form");
        },
        complete: function(){
            $delBtn.prop('disabled', false); // 请求完成后恢复按钮状态
        }
    });
}

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