如何获取URL ID并将data-id值通过AJAX POST请求提交给Controller

你现有代码存在多处语法和逻辑错误，修改如下： #

现有代码问题列表 #

• 作用域指向错误：$(document).ready() 回调里的 this 指向document对象，不是你定义的.test元素，无法直接拿到该元素的data-id
• 语法错误1：AJAX配置的url参数结尾缺少闭合引号，且原拼写delet大概率是delete的笔误
• 语法错误2：data参数格式错误，对象类型参数需要用{}包裹键值对
• 取值方法错误：jQuery的data()方法读取自定义属性时，不需要加data-前缀，直接写属性后半段即可
• 元素属性为空：HTML里的data-id没有赋值，需要先填入你要传递的ID值

可用场景代码 #

场景1：页面加载完成后直接读取单个.test元素的data-id发请求 #

HTML代码：

<div class="test" data-id="1"></div> <!-- 这里填入你要传递的ID，比如1、2、3 -->

JS代码：

<script type="text/javascript">
$(document).ready(function () {
    // 手动选中目标.test元素
    let element = $('.test');
    $.ajax({
        type: "POST",
        url: "/actionid/delete",
        // 正确的data对象格式
        data: {
            id: element.data("id") // 无需加data-前缀
        },
        success: successFunc,
        error: errorFunc
    });

    function successFunc(data, status) {     
        alert(data);
    }

    function errorFunc() {
        alert('error');
    }
});
</script>

场景2：点击.test元素时才触发请求（更常用，适合多个元素的场景） #

HTML代码（多元素示例）：

<div class="test" data-id="1">ID为1的元素</div>
<div class="test" data-id="2">ID为2的元素</div>
<div class="test" data-id="3">ID为3的元素</div>

JS代码：

<script type="text/javascript">
$(document).ready(function () {
    // 给所有.test元素绑定点击事件
    $('.test').click(function() {
        // 此时this指向当前被点击的.test元素
        let element = $(this);
        $.ajax({
            type: "POST",
            url: "/actionid/delete",
            data: {
                id: element.data("id")
            },
            success: successFunc,
            error: errorFunc
        });
    })

    function successFunc(data, status) {     
        alert(data);
    }

    function errorFunc() {
        alert('error');
    }
});
</script>

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