javascript - 对包含数据的 URL 使用 JQuery 和 AJAX

Question

我有这个简单的链接

<a href="${pageContext.request.contextPath}/update?id=${data.id}">Update</a>

${data.id} 已映射到我的 Controller 中，

map.addAttribute("data", data);

我不想使用链接，我想使用 jquery 和 AJAX，因为它不会刷新我的整个页面，而只会刷新页面的一部分。

相反，我会为我的 javascript 添加一个 id。

<a id="get-id">Update</a>

问题是我不知道如何将 data.id 传递给 JavaScript 文件

现在在我的 javascript 文件中

$('#get-id').click(function(){

    $.ajax({
        type: "get",
        url: ROOT_URL + '/update?id=${data.id}',            
        dataType: "text"
    }).done(function(data) {
        $('#update-container').html(data);
    });
});

Answer 1

您可以使用 data 属性来存储元素的元数据，如下所示:

<a id="get-id" data-id="${data.id}">Update</a>

然后，您可以使用 data() 方法在点击处理程序中读取该属性:

$('#get-id').click(function() {
    $.ajax({
        type: "get",
        url: ROOT_URL + '/update',            
        data: { id: $(this).data('id') },
        dataType: "text"
    }).done(function(data) {
        $('#update-container').html(data);
    });
});

How about If they were multiple buttons using that id. Which wont work. So I will use a class. How will I implement that?

模式是相同的。您将循环访问数据集以创建多个 a 元素，并按类分组:

<!-- in a loop -->
<a class="foo" data-id="${data.id}">Update</a>

除了选择器之外，jQuery 将完全相同:

$('.foo').click(function() {
    $.ajax({
        type: "get",
        url: ROOT_URL + '/update',            
        data: { id: $(this).data('id') },
        dataType: "text"
    }).done(function(data) {
        $('#update-container').html(data);
    });
});