Ajax在元素列表上使用不显眼的javascript请求

Question

所以我真的更喜欢使用不引人注目的javascript来内联javascript.我觉得使用它要容易得多.

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

例如:

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

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

所以我想将javascript附加到每个将调用ajax帖子的<a>标签上,但是我需要"id"来从后端删除正确的元素.

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

我试过的一些事情:

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

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

Answer 1

已经有一段时间了，我找到了一个令我满意的解决方案。它可能并不完美，但这是迄今为止我找到的最好的替代方案。

公平地说，所有这些答案都是正确的——它们会很好地工作。在这一点上，这只是一个美学问题，YMMV。

因此，在相同的模板伪代码中：

<% for e in list %>
  <a href="#" class="delete"
     data-method="delete"
     data-url="<%= delete_url(e.id) %>"><%= e %></a>
<% end %>

还有一些 jQuery 可以满足我的要求：

$('a.delete').on('click', function(e) {
  var self = $(this);
  var method = self.data('method');
  var url = self.data('url');

  $.ajax({
    url: url,
    type: method
  }).done(function() {
    alert('woot - success');
  });
});

我认为data元素是目前了解如何与 Web 服务交互的最佳方式。这允许我们使用与视图渲染中使用的相同的 url 帮助器。