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

我只做10％的时间做前端开发，并且好奇这是处理ajax调用的更好方法。这些调用只是将数据发布到指定操作名称和ID的Web应用程序。使用javascript：函数语法与jQuery选择器进行Ajax调用

<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

来源

2011-09-01 timpone

我更喜欢将行为从标记中清除，以便清理并澄清两者。 –

那么第二种方法就是你所说的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-开始是实施用户定义的数据的属性。它也向后兼容（将与旧版浏览器兼容）。

来源

2011-09-01 13:49:38

我正要回应类似的东西。使用'data-action'（或其他）的主要优点是，将来当其他开发人员重新考虑CSS时，类可以完全更改，因为JavaScript不依赖于它们。这从长远来看有助于减少JS的数量。 –

谢谢。所以在data-*例子中，这些会在HTML4浏览器中无法验证？这只会是重大的缺点吗？只是好奇，因为这是为客户，并不希望它出现。再次感谢。 – timpone

那么，根据http://validator.w3.org/，这些属性会引发HTML 4.01和XHTML doctype的验证错误。但它应该*工作*，无论如何，即使他们提出验证错误根据规范。 –

方法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（）方法在元素上存储数据。

来源

2011-09-01 13:48:25

很酷 - 现在正在调查jQuery.data（），但有点早上 - 7AM – timpone

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

回答

相关问题