jQuery AJAX调用REST接口删记录按钮失效及删除后页面不刷新问题

一、初始点击删除无响应问题修复 #

该问题由3个原因导致，对应修复如下：

1. 避免重复ID：动态生成的多个删除按钮不能使用同一个ID，将ID替换为class，符合DOM规范
2. 使用事件委托绑定事件：删除按钮是页面加载完成后通过AJAX动态插入的，初始页面加载时不存在该元素，直接绑定click事件无法生效，需要将事件委托给页面初始就存在的父元素（如document、table节点）
3. 按钮绑定对应数据ID：生成按钮时将数据的code值存入按钮的自定义属性，方便点击时获取对应数据标识

二、删除后无法自动刷新、弹出错误提示问题修复 #

该问题的核心原因是AJAX配置与后端返回值类型不匹配：你的删除接口返回的是纯文本字符串，但AJAX配置了dataType: 'json'，jQuery会尝试将返回值解析为JSON，解析失败就会进入error回调，导致success回调中的跳转逻辑不执行，所以页面不会自动刷新，同时弹出error的alert提示。
对应修复如下：

1. 调整AJAX的dataType配置，和后端返回值类型匹配
2. 可选优化：删除成功后直接移除对应DOM行，无需刷新整个页面，体验更流畅

具体修改代码 #

1. listCarsSelling.js 动态生成按钮部分修改

// 把原来生成按钮的行替换成下面的内容，用class替代id，同时将code存入data-code属性
tr.push('<td><button class="updatePosition" data-code="'+json[i].code+'">Update</button>&nbsp;&nbsp;'
+ '<button class="deletePosition" data-code="'+json[i].code+'">Delete</button></td>');

2. delete.js 事件绑定部分修改

$(document).ready(function() {
    // 事件委托绑定删除点击事件
    $(document).on("click", ".deletePosition", function() {
        const $deleteBtn = $(this);
        const code = $deleteBtn.data('code');
        $.ajax({
            url: '/ListCarsSelling/'+code,
            method: 'DELETE',
            contentType: "application/json",
            // 后端返回文本类型，修改dataType适配
            dataType: 'text',
            success: function () {
                // 方案1：无刷新删除，直接移除当前行
                $deleteBtn.closest('tr').remove();
                // 如果需要刷新页面，注释上面一行，打开下面一行即可
                // window.location.reload();
            },
            error: function (error) {
                alert('删除失败：' + error.responseText);
            }
        });
    });
});

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