Ajax-запросы с ненавязчивым JavaScript над списками элементов

Question

Так что я действительно предпочитаю использовать ненавязчивый javascript для встроенного javascript.Мне намного легче работать.

Проблема, с которой я постоянно сталкиваюсь, заключается в том, что я не знаю, как получить данные для каждого конкретного элемента, с которым я хочу работать.

Например:

У меня есть список, и я генерирую следующий HTML-код (здесь псевдокод)

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

Поэтому я хочу прикрепить javascript к каждому из них теги, которые будут вызывать пост ajax, но мне нужен "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 для хранения строки с идентификатором следующим образом:

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

И считайте идентификатор, разделив его на нечто вроде подчеркивания:

$('#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
    })
});

Answer 2

Я часто храню данные такого типа в теге, например:

Метод тега атрибута

   <div id="list">
      <a href="/link" post_id="68">Some post</a>
   </div>

Затем в jQuery сделайте что-то вроде:

 $('#list').delegate('a.delete', 'click', function(event) {
     event.preventDefault(); // Stop default click event

     // ajax stuff here
     // $(this).attr('post_id') = 68
 });

Обновление: .attr('post_id') не работает в IE6.

---

Альтернативные методы?Хмм ....

Все они используют вышеуказанную функцию делегата.

В выделенном элементе, используя класс или id, для определения данных элемента:

   <div id="list">
    <a href="/link"><span class="hide post_id">66</span>Some post</a>
   </div>

• Доступ по: $('span.post_id', this).text()

Возможно, одна из худших идей для простых идентификаторов, но если вам нужно хранить сложные данные, добавьте их вэлемент может быть опцией.

---

В href ...

   <div id="list">
      <a href="/link/66">Some post</a>
   </div>

• Доступ по: $(this).attr('href').match(/\/([0-9]+)$/)[1]

Этот метод, очевидно, зависит от вашего URL.Это один из самых ненавязчивых методов, если предположить, что ваша структура URL не слишком сложна или часто меняется.

---

Это идентификатор.Это уникально.Давайте ID:

   <div id="list">
      <a href="/link" id="post_66">Some post</a>
   </div>

• Доступ по: $(this).attr('id').split('_')[1]

Преимущество этого метода заключается в том, что вы также можете стилизовать элементы на основе определенных идентификаторов- иногда полезно.Это также имеет смысл.Ваш идентификатор уникален.Эта якорная ссылка относится к этой записи, этому уникальному идентификатору, поэтому имеет смысл использовать атрибут id.

Answer 3

Вы можете прикрепить идентификатор к каждому элементу <a>, как этот <a href=".." id="delete_<%e.id%>" >, затем, когда вы прикрепите событие к этой ссылке, вы сможете найти идентификатор через строку indexOf и использовать связанную функцию ajax.

Answer 4

Прошло много времени, и я нашел решение, которым я доволен. Возможно, он не идеален, но это лучшая альтернатива, которую я нашел до сих пор.

Если честно, все эти ответы верны - они будут работать просто отлично. Это просто вопрос эстетики на данный момент, и 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 элементы в настоящее время являются лучшим способом узнать, как взаимодействовать с веб-сервисом. Это позволяет нам использовать те же самые помощники URL, которые мы использовали бы при рендеринге представления.