[2023.1.19.목] REST API 활용 - ajax로 사용자 조회, 삭제, 추가

 

 

jQuery의 ajax

 

$.get( url, data, function(response) { ... }, dataType ) 

• GET 방식의 ajax 요청을 서버로 보낸다.
• dataType은 서버의 응답 콘텐츠 타입을 지정한다. (텍스트, json, xml 등등) 
• dataType은 생략가능하다.

$.post( url, data, function(response) { ... }, dataType ) 

• POST 방식의 ajax 요청을 서버로 보낸다. 
• dataType은 서버의 응답 콘텐츠 타입을 지정한다.
• dataType은 생략가능하다.

$.getJSON( url, data, function(response) { ... } )

• GET 방식의 ajax 요청을 서버로 보낸다.
• 서버의 응답데이터가 json 형식일 때만 사용한다.  
• dataType이 "json"인 경우다. 
• json 형식의 데이터를 서버로 '보낼 때'는 사용할 수 없다. (받아올 때만 O)
  ->json은 요청메시지의 바디에 붙어서 가기 때문에

$.ajax( { name : value, name : value, name : value, ... } ) 

 

 

*** name이 data일 때, 

 { name:value, name:value }          ----> 자바스크립트 객체 표현식

" name=value & name=value "      ----> 쿼리스트링. 위처럼 적어도 실제는 이렇게 전달됨

' { "name":value, "name":value } '  ----> json 형식 (텍스트) 

 

 

***name이 contentType일 때, 

    contentType (클라이언트가 서버로 보내는 값) 지정에 따라 적절한 data, type을 선택해야 함 !! 

 

 "application/x-form-urlencoded"  ---> 이렇게 적으면

                                                             { name:value, name:value }, "name=value & name=value" 만 쓸 수 있음

                                                             { name:value, name:value } 이렇게 적고, contentType을 설정하면, 

                                                             " name=value & name=value "이걸로 감

                                                            => @RequestParam("name") 으로 꺼내야 함

                                                            -> GET, POST, PUT, DELETE 모두 가능

 

"application/json"                          ---> 이렇게 적으면

                                                              ' { "name":value, "name":value } ' 

                                                              => @RequestBody 를 써야 함 (json 형식은 반드시 요청메시지의 바디부에 담김)

                                                              -> 반드시 "POST" or "PUT"

                       (json은 요청메시지를 @RequestBody에서 꺼내는데 post, put만 @RequestBody에 값을 담을 수 있기 때문)

 

 

 

 

 

dataType (서버가 클라이언트로 응답하는 값)에 지정가능한 값
: "xml", "html", "text", "script", "json", "jsonp"

 

 

$.ajax 사용예시 

 

 

 

요청파라미터 형식 (javascript 객체)으로 받을 때는 @RequestBody 안적어도 됨

 

 

 

json 형식의 텍스트를 받을 때는 @RequestBody를 적어야 요청메시지의 바디부에 있는 json을 받을 수 있음 

 

 

---

 

jQuery의 each( ) 함수 

 

• // 배열의 값들을 반복처리한다.
  $.each(배열, function(index, item) { ... })
  
  • 배열에 저장된 값의 개수만큼 지정된 함수를 반복수행한다.
  • 함수가 실행될 때마다 배열의 0번째 값부터 순서대로 하나씩 전달된다.
  • 함수의 매개변수
    index : 지금 처리중인 값의 인덱스가 전달된다. 0부터 시작되는 숫자
    item : 지금 처리중인 배열의 값이 전달된다. 

 

 

• // 선택자로 선택된 엘리먼트들을 반복처리한다.
  $(선택자).each(function(index, element) { 
                    $(element).jQuery메소드( ); 
  }); 
  • 선택자표현식으로 선택된 엘리먼트들을 하나씩 반복처리할 때 사용한다.
  • 선택자표현식으로 선택된 엘리먼트의 개수만큼 지정된 함수를 반복수행한다.
  • 함수가 실행될 때마다 선택된 엘리먼트가 0번째 것부터 순서대로 하나씩 전달된다.
  • 함수의 매개변수
    index : 지금 처리중인 엘리먼트의 인덱스가 전달된다. 0부터 시작되는 숫자
    element : 지금 처리중인 엘리먼트 객체가 전달된다. 
    
    
• $(선택자).each(function( ) {
                    // 이 함수내의 this에는 함수가 실행될 때마다 전달되는 엘리먼트 객체가 들어있다. 
                    $(this).jquery 메소드 ( ); 
  } )

 

 

 

---

 

 

사용자 목록 불러오기 

 

 

 

 

* 프론트엔드 user.html 의 자바스크립트

 

 

* UserController 의 요청핸들러 메소드 (모든 사용자 조회) 

 

 

---

 

 

클릭한 사용자의 상세정보를 ajax로 띄우기, 

클릭한 행만 색 표시하기 

 

 

 

* user.html 자바스크립트 

 

 

 

 

* UserController (특정 사용자 정보 조회)

 

 

 

 

---

 

사용자 삭제하기 

 

 

 

* user.html 

 

 

 

 

* UserController (삭제된 사용자 반환) 

 

 

 

---

 

 

사용자 추가하기 

 

 

 

* user.html 에 사용자 추가 폼 생성, 자바스크립트 

 

 

 

 

 

let text = JSON.stringify(user) -----> 자바스크립트 객체나 배열을 json 문자열로 변환

let obj = JSON.parse(text) -------> json 문자열을 자바스크립트 객체나 배열로 변환

 

 

* let user 변수의 id, password, name, email, tel 변수는

 Controller의 @RequestBody로 받는 UserRegisterForm 의 변수와 같아야 함 -> 그래야 값이 그 안에 들어감 

 

 

 

 

* UserController 

 

 

 

 

 

--- contentType : urlencoded 일 때와, json 일 때 

 

 

* data로 넘기는 값에 obj 객체를 넣으면 -> 요청메시지의 바디부에 &로 연결 -> @RequestBody를 안적어줘도 됨

-> 바디부에 적은 변수명과 UserRegisterForm 객체의 변수를 알아서 조사해서 하나씩 넣어줌

 

 

 

 

 

* data로 넘기는 값에 jsonText를 넣으면 -> 요청메시지의 바디부에 json 텍스트가 들어감 -> @RequestBody 반드시 적음

-> @RequestBody 를 통해 json 텍스트를 바로 변환해서 UserRegisterForm 객체에 넣어줌 

 

 

 

===> 어떻게 값을 전해주느냐에 따라서, 받는 방법도 달라짐

 

 

---

 

 

지금은 이렇게 분리해서 개발 중 (별도의 프론트엔드)

 

 

 

분리하지 않는 방법