javascript - 使用不显眼的 javascript 对元素列表进行 Ajax 请求

Question

所以我真的更喜欢使用不显眼的 javascript 来内联 javascript。我发现使用它更容易。

我一直遇到的问题是，我不知道如何为我想使用的每个特定元素获取数据。

例如:

我有一个列表，我生成了以下 HTML(这是伪代码)

<%for e in list%>
    <a href="#" class="delete"><%=e%></a> <!-- <%= e.id %> ??-->
<%end%>

所以我想将 javascript 附加到每个将调用 ajax post 的 标记，但我需要“id”从后端删除正确的元素。

$('a.delete').click(function() {
    // Ajax request using "e.id"
});

我尝试过的一些事情:

1. 构建 href 并使用 attr 方法将 ajax 请求发送到该 url。 (我不太喜欢 POST 请求，但它确实有效。
2. 使用 rel 属性来存储我需要的数据。
3. 使用 HTML5 data 属性。 (我不知道它在所有浏览器中的可用性，而且由于我们需要支持 IE6+，所以我不太喜欢使用它的想法。)
4. 为每个 标签创建一个表单并将其序列化。 (这似乎有很多额外的代码，但看起来也很干净。)

实现此目标的最佳做法是什么？

Answer 1

使用 id 属性来存储带有 id 的字符串，如下所示:

<%for e in list%>     
    <a id="link_<%= e.id %>" href="#" class="delete"><%=e%></a> 
<%end%> 

然后通过拆分下划线之类的东西来读取 id:

$('#list a').click(function(){
    //old var id = $(this).attr('id').split('_')[1];
    var id = this.id.split('_')[1]; //thx @mu

    $.ajax({
        url: 'http://www.someurl.com/delete.aspx?id=' + id,
        //...more
    })
});