Question

我只有10％的时间做前端开发，我很好奇这是处理ajax调用的更好方法。这些调用只是将数据发布到指定操作名称和ID的Web应用程序。

<a href='javascript:addToList({'action':'set-default-time-zone','id':23})'>set default timezone</a>
<div class='add-to-list action-set-default-time-zone id-23'>set default timezone</div>

多年来我一直使用这两种，但我不确定哪一种更受欢迎。看起来他们最终会达到同样的目的。你会认为这些是两个最好的选择，并且比另一个好吗？

我已经实现了div方法如下：

$(document).ready(function(){
    $('.add-to-list').click(function(){
        var id=getId($(this).attr("class"));
        var action=getAction($(this).attr("class"));
        $.post('/api/' + action,function(data){
          ...
        },'json')
    });
});


function getAction(str){
    var parts=str.split(' ');
    var phrase='action-';
    for(i=0; i<parts.length; i++){
        var val=parts[i].match(phrase);
        if(val!=null){
            var action=parts[i].split('action-');
            return action[1];
        }
    }
}

function getId(piece){
    var parts=piece.split('id-');
    var frag_id=parts[parts.length-1];
    var part_id=frag_id.split('-');
    var id=part_id[part_id.length-1];
    return id;
}

链接方法看起来很简单。

THX

Answer 1

第二种方法就是你所谓的Unobtrusive JavaScript。它被认为是一种更强大的方法（我将在这里避免使用术语更好。）

但是，您的实现有点过于复杂。它可以调整为：

HTML：

<div class="add-to-list" data-action="set-default-time-zone" data-id="23">
    set default timezone
</div>

JavaScript的：

$(document).ready(function () {
    $('.add-to-list').click(function () {
        var id = $(this).attr("data-id");
        var action = $(this).attr("data-action");

        $.post('/api/' + action, function(data) {
          // ...
        }, 'json')
    });
});

HTML5 specification允许以data-开头的属性携带用户定义的数据。它也向后兼容（适用于旧浏览器。）

Answer 2

方法1：

<a href='javascript:addToList({'action':'set-default-time-zone','id':23})'>set default timezone</a>

方法2：

<div class='add-to-list action-set-default-time-zone id-23'>set default timezone</div>

方法2是首选方法，因为您可以通过更清晰地分离标记和脚本代码来练习不引人注目的编码风格。它更容易阅读和调试，并且更易于维护。另外，我建议不要使用CSS类来传递数据，而是使用jQuery.data（）方法在元素上存储数据。

使用javascript：函数语法与jQuery选择器进行Ajax调用

2 个答案: