JQuery и атрибуты данных для обработки всех вызовов AJAX? - PullRequest
Новая
       16

JQuery и атрибуты данных для обработки всех вызовов AJAX?

6 голосов
/ 02 августа 2011

Я подумываю о том, как уменьшить количество кода JavaScript, включив ajax для ссылок из атрибутов.Пример: 

<a href="/Default/Link.html" data-endpoint="/Ajax/Link.html" rel="targetId" async="true">Click me!</a>

async="true" отключит поведение ссылки по умолчанию (href) и выполнит вызов ajax, используя значение data-endpoint, и вставит его в идентификатор элемента, определенный в rel,

Я не эксперт по JS, поэтому буду признателен за любые мысли или подводные камни при использовании этого подхода.Такие параметры, как cache: true и т. Д., Было бы неплохо иметь возможность передавать данные, но не очень нужны, поскольку я хотел бы сделать это для получения частичных представлений, которые содержат больше или меньше живых данных (кеш не требуется).

(Это вдохновлено докладом, который я видел о том, как facebook минимизировал свой код, но, вероятно, очень упрощен по сравнению с тем, как они оптимизируют все до каждого бита и байта)

1 Ответ

9 голосов
/ 02 августа 2011

как то так

Html 

<a href="/Default/Link.html" 
    data-endpoint="/Ajax/Link.html" 
    data-target="targetId" 
    data-cache="false",
    data-async="true">Click me!</a>

JQuery 

$('a[data-async="true"]').click(function(e){
    e.preventDefault();
    var self = $(this),
        url = self.data('endpoint'),
        target = self.data('target'),
        cache = self.data('cache');

    $.ajax({
        url: url,
        cache : cache,
        success: function(data){ 
                       if (target !== 'undefined'){
                          $('#'+target).html( data );
                       }
                 }
    });
});
...