Ajax动态生成按钮跳转href无法携带jobId问题咨询

嘿，我一眼就看到问题出在哪儿了——你在拼接<a>标签的href属性时，把JavaScript变量和字符串的写法搞混啦！

错误原因 #

你当前代码里的<a>标签部分是这样写的：

'<a href="/deleteAjax/" + data[i].jobId + target="_parent"><button id="clickID">Click me !</button></a>'

这里的"/deleteAjax/" + data[i].jobId完全被包裹在单引号内部，JavaScript会把整个片段当成普通字符串处理，不会解析data[i].jobId的实际值，所以最终生成的href只会是/deleteAjax/，不会带上jobId。

两种修正方案 #

方案1：正确拼接字符串

把变量从单引号中抽离出来，用+号完成字符串拼接，注意引号的闭合：

'<a href="/deleteAjax/' + data[i].jobId + '" target="_parent"><button class="delete-btn">Click me !</button></a>'

方案2：使用ES6模板字符串（推荐）

用反引号`包裹整个HTML片段，变量用${变量名}插入，写法更清晰，不容易出错：

`<a href="/deleteAjax/${data[i].jobId}" target="_parent"><button class="delete-btn">Click me !</button></a>`

额外小建议 #

你给每个按钮都设置了相同的id="clickID"，这违反了HTML中id必须唯一的规范！如果后续需要给按钮绑定事件，会出现逻辑混乱。建议换成class，比如class="delete-btn"。

修正后的完整代码 #

<script type="text/javascript">
$.ajax({
    url: '/jsonDiqka',
    dataType: 'json',
    success: function(data) {
        for (var i=0; i<data.length; i++) {
            // 使用模板字符串拼接HTML，可读性更强
            var row = $(`<tr>
                <td>${data[i].jobId}</td>
                <td>${data[i].lokacioni}</td>
                <td>${data[i].kategoria}</td>
                <td>
                    <a href="/deleteAjax/${data[i].jobId}" target="_parent">
                        <button class="delete-btn">Click me !</button>
                    </a>
                </td>
            </tr>`);
            $('#myTable').append(row);
        }
    },
    error: function(jqXHR, textStatus, errorThrown){
        alert('Error: ' + textStatus + ' - ' + errorThrown);
    }
});
</script>

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