[JavaScript] JSON과 데이터 전달

JSON(JavaScript Object Notation): 브라우저와 서버 사이에 오고가는 데이터를 사람이 읽을 수 있게 하기 위한 데이터 포맷. 주로 데이터는 "속성:값"과 같이 쌍을 이루는 식으로 표현된다.

 

예시) 

 

{"name":"John"}

 

하나의 쌍이 아닌 여러 값을 넣어서 배열로 표현하는 것도 가능하다.

 

예시)

 

{
	"name1":"John",
	"name2":"Evan",
	"name3":"Marko"
}

 

더 복잡하게 보내려면 이렇게도 가능하다.

 

예시)

 

[
	{
	    "name": "Molecule Man",
	    "age": 29,
	    "secretIdentity": "Dan Jukes",
	    "powers": [
				"Radiation resistance",
				"Turning tiny",
				"Radiation blast"
		]
	},
	{
	    "name": "Madame Uppercut",
	    "age": 39,
	    "secretIdentity": "Jane Wilson",
	    "powers": [
				"Million tonne punch",
				"Damage resistance",
				"Superhuman reflexes"
    	]
    }
]

 

 

이 데이터를 보내는 방식으로는 보통 ajax를 이용하는데 보내는 방식에도 여러 방법이 있지만, 가장 흔한것은 "application/json; charset=utf-8" 방식과 "application/x-www-form-urlencoded; charset=utf-8" 방식이다. 이것을 contentType이라고 하는데, 데이터를 주고 받을때 이 방식을 명시하고 그에 맞춘 형식으로 보내야 데이터가 전달 될 수 있다.

 

application/json; charset=utf-8: 안드로이드나 IOS의 app을 위한 restAPI를 개발할 때 주로 사용되고, 데이터가 전달되는 방식은 다음과 같다.

 

request)

 

{
	"id":"asdf",
	"pwd":"qwer1234"
}

 

JavaScript에서 ajax로 데이터 전달하기)

 

$.ajax({
        type: 'POST',
        url: "/ajaxUserAdd",
        data: JSON.stringify(reqObj),
        contentType: "application/json; charset=utf-8",
        success: function(res){
            alert(res);
        },
        error: function(res){
            alert(res);
        }
    });
}

 

Controller에서 데이터 받기)

 

@PostMapping("/ajaxUserAdd")
public String userAdd(@RequestBody Map<String, String> param){
    String uid = (String) param.get("id");
    String pwd = (String) param.get("pwd");
}

 

application/x-www-form-urlencoded; charset=utf-8: 웹페이지를 개발할때 주로 사용되며, contentType을 기입하지 않았을 경우 client에서 default로 이 방식으로 데이터를 전달한다. 데이터를 encoding해서 보내진다.

 

request)

 

 

JavaScript에서 ajax로 데이터 전달하기)

 

 

 

Controller에서 데이터 받기)