[AJAX] 동적태그에 AJAX 적용하기

$("#allmember").on("click", function(){
$.ajax({
url : "ajaxmemberlist", 
dataType:"json", 

<!--(jackson 사용) -->
success : function(resp)

{for(var i =0; i<resp.length; i++){
var onemember = "<h3> <a id=' " + resp[i].id + " ' href= ' ' >" + resp[i].id + "</a>" + " : "
+ resp[i].name + " : "
+ resp[i].pw + '</h3>';   
$("#ajaxresult2").append(onemember);
}

 

- 다음과 같은 AJAX 문에서  버튼 클릭시,

a 태그들을 가진 리스트가 동적으로 생성된다.

 

- a 태그의 id 에  해당 dto 의 데이터를 넣어두면

=> a 태그에 이벤트 걸때, 해당 dto 정보를 같이 보낼 수 있다. { "id"  : {this}.attr("id") }  

 

이렇게 동적으로 생성된 a 태그들에 이벤트를 걸어줄 때, JS 문법은 아래와 같다.  

: $( 동적으로생성되는 태그의 부모태그 ). on ( "click", "동적으로 생성되는태그", function() { } )

 

$("#ajaxresult2").on( "click", "a",  function(event){
event.preventDefault();
$.ajax({
url : "ajaxMemberPw", 
data:{"id" : $(this).attr("id")},
 
success : function(resp){   
$("#ajaxresult4").html(resp);
} 

 

=> 동적생성태그 a 클릭시, AJAX 로 데이터 전송 

- ${thid} : 현재태그 == a 태그 

( a 태그 id 에 dto 의 id 를 넣어뒀기 때문에, 그걸 이용해서 a 태그 클릭 시, 해당 데이터를 보낼 수 있다. )   

 

 

- 여기서, AJAX 로 데이터 전송할 때, 위와같이

 

(1) JSON 에 data 를 담아서 보내기 

: 데이터를 JSON 으로 보내면 => 파라미터에서 같은 이름의 변수로 받기 ( 맵핑 ) 

 

방법도 있지만 

 

(2) @PathVariable 을 사용할 수 도 있다. 

: URL에서 변수로 들어오는 데이터값을 받고, 그 값을 @PathVariable 로 메소드의 파라미터로 가져온다. 

 

$.ajax({
url : "ajaxMemberPw/ " + $(this).attr("id"), 

 

- URL 에 변수를 붙여서 보내고 ( a 태그에 담긴 dto 의 id  ) 

 

@GetMapping("/ajaxMemberPw /{id}") 
public String memberPw( @PathVariable("id") String id) throws IOException {

 

- 맵핑 URL 에서 { 변수 } 로 들어오는 값을 받아낸다. 

=> 그 { 변수 } 값을 @PathVariable( "변수" ) 로 가져와서 String id 에 집어 넣는다. 

 

즉, URL 로 들어오는 변수값을 수동으로 파라미터에 맵핑해서 사용한다.  

 

- 변수URL 은 맵핑을 편하게 할 수 있게 도와주기 때문에,

@PathVariable 은 상당히 많이 사용된다. 

 

ex ) 게시판 등에서 제목 클릭시 해당 게시글 내용으로 이동시킬 때, 

변수URL 로 지정해두고 @PathVariable 사용 

(  파라미터로 name/value 보내기   

== JSON  데이터로  보내기

== URL 변수로 보내기 )    뭐가 편한가 빠른가 의 차이.