jQuery和数据属性可处理所有ajax调用？

小编典典

jQuery和数据属性可处理所有ajax调用？

ajax

我正在考虑通过在属性链接上启用ajax来减少javascript代码量的方法。例：

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

async="true"将禁用链接（href）的默认行为，并使用该data- endpoint值进行Ajax调用并将其插入定义的元素ID中rel。

我不是JS专家，所以我很高兴使用此方法的任何想法或陷阱。像cache：true这样的选项也可以传递，这很酷，但是并不是真正需要的，因为我想这样做以获得包含或多或少实时数据的局部视图（不需要缓存）。

（这是从我看到的有关Facebook如何将其代码最小化的演讲中获得启发的，但是与他们如何优化每一位’n个字节的内容相比，这可能非常简化）

阅读 215

2020-07-26

共1个答案

小编典典

像这样

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 );
                       }
                 }
    });
});

2020-07-26