web에서 json 형식으로 데이터를 주고 받는 것은 선택이 아닌 필수가 되었습니다 !



저는 아직 front 쪽의 코딩이 많이 부족해서 javascript를 아직 잘 다루지 못하고 있습니다.



오늘 일을 하면서 사용한 두 함수를 정리해보려고 합니다.


javascript 의 ajax를 이용하여 요청하고 응답을 받을 때 json 포맷의 문자열이나 json 포맷의 객체를 만들 필요가 있습니다.


이 때 사용할 수 있는 함수가


JSON.parse() 와 JSON.stringfy()   입니다.



JSON.parse() 는 



JSON 포맷의 문자열을 JSON 포맷의 object로 바꾸어 줍니다.




위 그림과 같이 JSON 포맷의 문자열을 JSON 포맷의 object로 바꾸어 줍니다.


주의할 점은 JSON 포맷의 문자열이 아니라면 바로 에러가 발생합니다.


주로 사용하는 경우는 응답으로 json 포맷의 문자열의 data를 받았을 경우 json 포맷의 object를 만들 때 사용합니다.




JSON.stringfy() 는


JSON.parse() 와 반대로 JSON 포맷의 object를 JSON 포맷의 문자열로 변경해줍니다.





언제 주로 사용할까요?


.ajax() 함수에서 데이터를 보낼 때 data인자에 string이 아닌 경우는 자동으로 data를 process 하기 때문에 조금 번거롭기 때문에


JSON.stringfy() 함수를 이용해서 json 포맷의 문자열을 만들어서 사용합니다.



실제 JSON.stringfy()를 사용하는 예시 코드

function changeUsertype(id){
var data = {
"user_type_category": $('.user-type-category option:selected').val(),
"user_type_subcategory": $('.user-type-subcategory option:selected').val()
};
$.ajax({
method: "PUT",
url: "/api/users/" + id + "/usertype",
contentType:"application/json",
data: JSON.stringify(data),
success: function () {
alert("정상적으로 처리되었습니다.");
location.reload();
},
error: function (){
alert("서버와의 통신에 실패했습니다");
}
})
}


조금이나마 도움이 됐으면 좋겠네요.


감사합니다.





'프로그래밍 > javascript' 카테고리의 다른 글

JSON.parse() 와 JSON.stringfy() 함수 정리.  (0) 2017.12.12

+ Recent posts