javascript : function 구문과 jQuery selector를 사용하여 Ajax 호출을 수행합니다.

Question

저는 프론트 엔드 개발자 만이 시간의 10 %를 좋아하며, ajax 호출을 처리하는 가장 좋은 방법은 무엇인지 궁금합니다. 이 호출은 액션 이름과 ID를 지정하는 데이터를 웹 앱에 게시하는 것입니다.

<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> 

나는 두 해를 모두 사용했지만 어떤 것이 선호되는지는 확실하지 않습니다. 그들은 결국 같은 지점에 도달하는 것 같습니다. 당신은 이것들을 두 가지 최선의 대안으로 생각하고 다른 것보다 낫다고 생각합니까?

$(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; 
} 

링크 방법은 간단 보인다 다음과 같이

나는 사업부 방법을 구현했습니다.

들으

Answer 1

두 번째 방법은 Unobtrusive JavaScript입니다. 보다 튼튼한 접근 방법으로 여겨집니다. 여기서 이라는 단어는 더 이상 사용하지 않을 것입니다.

그러나 구현은 약간 복잡합니다.

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

자바 스크립트 :

HTML : 그것은 아래로 조절 될 수

$(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> 

스크립트 코드. 읽고 디버깅하기가 쉽고 유지 보수가 용이합니다. 또한 CSS 클래스를 사용하여 데이터를 전달하는 대신 jQuery.data() 메서드를 사용하여 요소에 데이터를 저장하도록 제안합니다.