jQuery和数据属性来处理所有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调用,并将其插入rel中定义的元素id.

我不是JS专家,所以我很欣赏使用这种方法的任何想法或陷阱.诸如cache:true等选项也很酷,但也可以传入,但不是真的需要,因为我想这样做以获得包含或多或少的实时数据的部分视图(不需要缓存).

(这是从我在facebook上如何最小化他们的代码的一个话题中得到启发,但与他们如何优化所有内容到每个位’n字节相比可能非常简化)

解决方法

像这样的东西

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

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...