티스토리 뷰
1. https://mvnrepository.com/ 링크로 접속하여 Gson jar 파일을 다운 받는다.
2. 개발환경에서 라이브러리를 추가한다. 인텔리제이에서 라이브러리를 다운을 받았는데 에러가 발생하여 WEB-INF - lib 폴더 안에 jar파일을 추가함
우선 아래는 JS의 코드이다. query 변수에 JS 오브젝트를 저장한다. 후에 출력해보았다.
var query = {username : "lea",
password: "1234"
};
console.log(query)
Prototype이 Object인 걸 볼 수 있다.
JS의 오브젝트를 JSON으로 바꿔보자 JSON.stringify()
var jsonData = JSON.stringify(query);
console.log(jsonData);
json방식으로 콘솔 창에 출력되었다.
요약 :
코드
const person = {name: "lea", age: 18};
var personJson = JSON.stringify(person);
console.log(person);
console.log(personJson);
결과 출력
{ name: 'lea', age: 18 }
{"name":"lea","age":18}
다시 JS 오브젝트로 바꾸려면 JSON.parse() 함수를 사용하자.
JS에서 넘어온 Json을 자바 객체로 파싱하기 : fromJson()
JS 코드
var query = {username : "lea",
password: "1234"
};
console.log(query)
//JSON.stringify(str) -> JS 오브젝트를 JSON으로 변경
var jsonData = JSON.stringify(query);
console.log(jsonData);
//JSON.parse(str) -> JSON을 JS 오브젝트로 변경
$.ajax({
type: "POST",
url: "http://localhost:8080/ajax2",
data: jsonData,
contentType: "application/json",
dataType:"json"
}).done(function (result){
console.log(result);
});
JS에서 ajax() 함수를 활용했다. data는 JS 오브젝트에서 Json으로 바꿔 url에 전달했다. 요청 데이터 타입을 'application/json'으로 설정했다. 응답 데이터는 json으로 설정했다. json을 받아오면 자동으로 JS 오브젝트로 파싱해준다.
Java 코드
BufferedReader br = request.getReader(); //http body를 순수하게 읽음
String requsetData = br.readLine();
Gson gson = new Gson();
UserDto userDto = gson.fromJson(requsetData, UserDto.class);
json으로 넘어온 데이터는 getParameter로 가져올 수 없기에 BufferedReader의 객체에 접근하여 정보를 가져온다.
JS에서 넘오는 json을 자바의 객체로 변환하기 위해서 Gson 라이브러리를 사용했다.
gson 참조변수에 접근하여 fromJson()함수를 사용했다. 파라미터로 JS에서 넘어온 데이터 값과 변환하려는 클래스를 넘겼다.
자바에서 객체를 Json으로 바꿔 JS에 데이터 전달하기 : toJson()
자바 코드
Gson gson = new Gson();
UserModel user = new UserModel();
user.setId(1);
user.setPassword("1234");
user.setUsername("love");
user.setPhone("0102222");
String userJson = gson.toJson(user);
System.out.println(userJson);
PrintWriter out = response.getWriter();
out.print(userJson);
out.flush();
UserModel의 객체를 Json으로 파싱하려고 한다.
Gson 객체를 생성하고 초기화한다.
참조변수 user에 접근하여 user의 정보를 저장한다.
gson 참조변수의 toJson()의 함수를 사용하여 파라미터에 참조변수 user를 넘긴다. toJson() 메소드는 String을 반환한다. 반환한 String 값인 userJson을 println() 함수로 출력하여 확인한다.
PrintWrite 참조변수 out에 접근하여 print()함수로 userJson 데이터를 JS로 보낸다.
JS 코드
var query = {username : "lea",
password: "1234"
};
console.log(query)
//JSON.stringify(str) -> JS 오브젝트를 JSON으로 변경
var jsonData = JSON.stringify(query);
console.log(jsonData);
//JSON.parse(str) -> JSON을 JS 오브젝트로 변경
$.ajax({
type: "POST",
url: "http://localhost:8080/ajax2",
data: jsonData,
contentType: "application/json",
dataType:"json"
}).done(function (result){
console.log(result);
});
자바에서 데이터 타입이 Json인 데이터를 성공적으로 받게 되면 done() 함수를 사용하여 기능을 구현할 수 있다. 자바에서 응답한 데이터를 result 변수에 담아 출력한다. 자동으로 JS오브젝트로 파싱된 결과를 볼 수 있다.