jquery - 点击后发布ajax变量

Question

我有一个 anchor 链接如下:

<a class="show-next-page" id="10" href="#" name="category" rel="100000">

这是点击处理程序:

$('.show-next-page').click(function(){
    var prodId = $(this).attr("id");
    var catId = $(this).attr("rel");
    var type = $(this).attr("name");

    $.ajax({
        url: 'admin-catalog/next',
        type: 'POST',
        dataType: 'json',
        data: "catId=" + catId + "&prodId=" + prodId,
        success: ajaxCatProds
    });

    return false;
});

如您所见，我将大量数据附加到此 anchor 链接，但我开始用完“有效”属性来附加更多数据。我现在开始认为这可能不是正确的做法。

任何人都可以建议替代/更优雅的方法吗？

Answer 1

使用数据属性尝试此操作。

HTML

<a class="show-next-page" data-id="10" href="#" data-name="category" data-rel="100000">

JS

//This method will give all the data attributes associated with the element.
var dataAttrib = $(this).data();
var data = {
    //You access the data attribute with there name without data part
    prodId: dataAttrib.id,
    catId: dataAttrib.rel,
    type: dataAttrib.name
};

$.ajax({
        url: 'admin-catalog/next',
        type: 'POST',
        dataType: 'json',
        data: data,
        success: ajaxCatProds
});