html5新属性data api

2014年10月8日 · 59 字 · 1 分钟

以往在做列表程序的时候，需要做类似“删除”功能的时候，往往是组装一个URL，类似于这个

index.php?m=news&a=delete&id=10

这是最普通的url方式来进行删除。

但是随着用户体验要求的增加，很多时候都需要使用ajax来实现相应效果。

记得很早以前在写一个CURD项目的时候，我是用ID来做的，类似于 id=“news_id_10”,id=“news_id_11” 这样，然后通过分割字符串来获取ID，简直就是要多麻烦有多麻烦，当时就在想有没有一个能自己定义所需数据的字段呢？

现在好了。HTML5的data-* API可以帮到我们

html代码

<a href="javascript:void(0)" data-action="delete" data-id="10">删除</a>

是不是看到了data-action和data-id属性呢？data-只要更改就可以了，需要满足标识符约束。

js代码

$(document).on('click', '[data-action="delete"]',
function() {
    var $id = $(this).data("id");
    var $this = $(this);
    ajax && ajax.abort();
    ajax = $.get('index.php', {
        id: $id,
        m: 'news',
        a: 'delete'
    },
    function(data) {
        if (data.status == 1) {
            //操作成功
        } else {
            alert(data.info);
        }
    },
    'json');
});

JQ提供的$.data方法确实挺方便的，但是请注意，本人发现$.data方法是只读的（就是不能改变data-id=“10"中的10），如果需要改变，请用底层的$.attr(‘data-id’,9)这种操作。

qrcode