使用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調用

回答

相關問題