[미완성]jQuery의 AJax를 통한 RestAPI JSON데이터 통신

클라이언트 영역 JSP단

<table>
    <tr>
        <td>
            <input type="text" name="name" id="name">
        <td>
    <tr>
    <tr>
        <td>
            <input type="text" name="id" id="id">
        <td>
    <tr>
    <tr>
        <td>
            <input type="text" name="password" id="pwd">
        <td>
    <tr>
    <tr>
        <td>
            <input type="button" id="signUp-btn">
        <td>
    <tr>
</table>

 

JavaScript단 AJax() 통신처리

<script>
$(function() {
    $('#signUp-btn').click(function () {		
        const id = $('#id').val();
        const pw = $('#pwd').val();
        const name = $('#name').val();		
        const user = {
            userId:id 
            ,userPwd:pw
            ,username:name
        }
        $.ajax({
            type:"POST", 
            url:"/user/",
            headers:{
            "Content-Type":"application/json"
            }, 
            dataType : "text",
            data : JSON.stringify(user), 
            success:function(result){ 
                console.log("통신 성공!:"+result);
                if(result === "Success"){
                    alert("회원 가입 성공!");
                    location.href="/";
                }
            }, 
            error:function(){
                console.log("통신 실패!");
            }
        })
    });
});
</script>

jQuery와 JavaScript문법을 통해 클릭시 이벤트를 발생시킵니다.

클릭을 했을때 이벤트 내용으로는 입력받은 아이디와 비밀번호, 이름을 자바스크립트 객체에 담고

 ajax()함수를 통해 담은 데이터 정보인 객체를 서버 컨트롤러에게 전송을 합니다.

이때 전송방식과 요청정보, 전송할 데이터형식, 서버로부터 받을 응답데이터형식, 그리고 통신성공시 성공되었다는 내용을 받는 성공 콜백함수, 에러콜백함수 등을 지정해줘야합니다. 

 이때, 코드상에서 const user 라는 이름의 자바스크립트 객체 변수에 담긴 key값이 VO와 일치하게 넘겨줘야 컨트롤러단에서 객체로 묶어 받을 수 있게됩니다.

앞서 Map과 객체는 JSON데이터형식에서 {"key":"value"} 이런 형태의 모양을 취하기 때문입니다.

그래서 key이름이 VO필드명과 일치하면 형태자체가 같게되므로 VO객체형태로 받을수 있게 되는것입니다.

또한 user의 형태는 JSON과 똑같이생겼지만 JSON은 아닙니다.

JSON은 JavaScript의 객체를 흉내낸 표기법 이기 때문에

추후에 ajax를 통해 보낼 때, JSON.stringify(user) 라는 메서드를 통해 JSON 데이터의 형태로 파싱해 줘야합니다.

이렇게 JSON형태의 데이터가 클라이언트로부터 컨트롤러로 넘어가서 서버단의 언어로 변환될 때는 우리가 설치했던Jackson이라는 라이브러리가 파싱을 해주게됩니다.

 

이 틀은 왠만해서는 외워두는게 좋으며, 이때 각 타입들의 의미도 항상 읽을수 있도록 외워줍시다.

 

• Type : 서버에 전송하려는 HTTP요청방식 put,get,delete,post등을 작성
• url : 서버에 즉 컨트롤러의어떤 uri를 통해서 통신할것인지 uri를 작성 (url을 써야하지만 uri만 써도 됩니다.)
• headers : {"요청 헤더 정보":"보낼 타입"}                                                    {"ContentType":"application/json"} -> 헤더의 정보를 보내줄 데이터 타입을 JSON타입으로 하겠다는것 입니다.  {"X-HTTP-Method-Override":"POST"} -> 만약 브라우저가 REST API방식을 지원하지 않는 상황에서 사용하려는 메서드 방식을 보내주는 역할을 하게됩니다.
• Content-Type 정의 : https://iamawebdeveloper.tistory.com/88 , https://juyoung-1008.tistory.com/4
• dataType : 컨트롤러로 부터 return 응답을 받는 데이터의 형태이며 text, xml, json, html 등이 가능합니다. 문자열이라면 text이고 객체나 Map 혹은 List라면 Json으로 지정해 주시면 됩니다.
• data : 서버로 전송될 데이터를 작성합니다. 
• success : function(result){ } 컨트롤러와의 통신이 성공했을때, return 데이터를 result에 담게되는 콜백함수 입니다. 
• error : function(){ } 통신 실패시처리할 내용들을 함수 내부에 작성합니다. 

참조 블로그 :

https://m.blog.naver.com/PostView.nhn?blogId=software705&logNo=220969995944&proxyReferer=https:%2F%2Fwww.google.com%2F

 

 

 

서버 영역 컨트롤러단

@RequestMapping("/user")
public class UserController {
	
    @Autowired
    private IUserService service;
	
    @PostMapping("/")
    public String register(@RequestBody UserVO user) {
		
        service.register(user);
        return "Success";
    }
}​

form의 파라미터전송법이 아닌 ajax함수를 통해 JSON데이터를 요청바디에 담겨져서 전송받기때문에

@RequestBody로 VO타입의 객체로 묶어 받습니다.

앞서말했듯 JSON데이터의 키값과 VO의 필드명이 일치하도록 value값을 담아 보냈기때문에, 객체로 받을 수 있게됩니다.