pom.xml에 추가할 dependency
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
Json 파싱
window.onload=function()
{
var data={name:"베트맨",age:"22"};
data = JSON.stringify(data);
//alert(data);
data = JSON.parse(data);
document.getElementById("name2").innerText=data.name;
document.getElementById("age2").innerText=data.age;
var data2 = '{"name":"슈퍼맨","age":"33"}'; << 변수명까지 따옴표 넣어주려면 이케
data2 = JSON.parse(data2);
document.getElementById("name4").innerText=data2.name;
document.getElementById("age4").innerText=data2.age;
}Json data 배열의 형태로 하나씩 꺼내서 보내기
window.onload=function()
{
var data = [{name:"홍길동" , age:"92"},{name:"홍순창" , age:"82"},{name:"홍순찬" , age:"35"}];
data = JSON.stringify(data);
data = JSON.parse(data);
var str="";
for문의 형태는 여러가지가 있는데 이 두개가 편해보임
*
for(member in data)
{
str = str+"이름 : " + data[member].name+" ";
str = str+"나이 : " + data[member].age+"<p>";
}
data.forEach(function(member,b,c) // a:value, b:index , c:전체내용
{
str = str+"이름 : " + member.name+" ";
str = str+"나이 : " + member.age+"<p>";
});
*
document.getElementById("my").innerHTML=str; << 안에 태그가 포함되있기때문에 innterHTML 사용
}Json 통해서 값만 파싱하기 위해 사용하는 @ResponseBody
@RequestMapping("/json4")
@ResponseBody
public String json4()
{
return "/json4"; << return 해줄때 보내주는 값이 바로 전송됨
}@ResponseBody와 @Controller 구분하지 않고 한번에 사용하는 @RestController
@RestController
public class Test2Controller {
@RequestMapping("/test2")
public String test()
{
return "<b> 감사합니다 </b>";
}
}ajax를 통해 비동기적으로 서버에서 데이터를 가져와서 출력
jsp 파일에서 ajax 통해서 요청을 하고
function getMember()
{
var chk = new XMLHttpRequest();
chk.onload=function()
{
alert(chk.responseText);
}
chk.open("get","getMember");
chk.send();
}
기존에 사용하던 방식
controller에서 처리해서 값 보내주기
@RequestMapping("/jstest/getMember")
public void getMember(HttpServletResponse response,PrintWriter out) throws Exception
{
//response.getWriter().print("super");
out.print("batman");
}
@ResponseBody 사용한 방식
@RequestMapping("/jstest/getMember2")
@ResponseBody
public String getMember2()
{
return "hong";
}Json 형식으로 client에 전달하기
JAVA 에서는 ' 하나짜리는 문자열이 아니고 char 즉 문자 하나를 뜻하기 때문에
쌍따옴표를 사용해야한다 그러하여 쌍따옴표가 중복되서 있어야되기 때문에 \ (역슬래시를 사용)
사용해야 한다 ( 하지만 요즘은 따로 이렇게 안해줘도 다 알아서 해줌 알아만 두자)
controller
@RequestMapping("/jstest/getJsonMember")
@ResponseBody
public String getJsonMember()
{
String member = "{ \"name\" : \"superman\" , \"age\" : \"33\" , \"phone\" : \"01029896615\" }"; // Json 형식으로 값을 저장
return member;
}
jsp
<script>
function getMember()
{
var chk = new XMLHttpRequest();
chk.onload=function()
{
//alert(chk.responseText);
var member = JSON.parse(chk.responseText);
// 태그까지 출력할거 아니니까 innerText, 태그까지 넣을거면 innerHTML
document.getElementById("name").innerText=member.name; << Json 데이터 받아온걸 출력
document.getElementById("age").innerText=member.age;
document.getElementById("phone").innerText=member.phone;
}
chk.open("get","getJsonMember"); << 요청 url
chk.send();
}
</script>
</head>
<body>
<input type="button" onclick="getMember()" value="명단가져오기">
<hr>
이름 : <span id="name"></span><p>
나이 : <span id="age"></span><p>
번호 : <span id="phone"></span>
</body>Json를 통해 DB 접근해서 가져온 값을 return 해줄땐
@Autowired
private JsonMapper mapper;
@RequestMapping("/jstest/getJsonMemberOne")
@ResponseBody
public String getJsonMemberOne()
{
MemberVo mvo = mapper.getMember();
String member = "{ \"name\" : \""+mvo.getName()+"\" , \"userid\" : \""+mvo.getUserid()+"\" , \"phone\" : \""+mvo.getPhone()+"\" }";
// 이런식으로 mvo에 담겨있는 값을 get을 통해 가져와서 넣어주면 됨
return member;
}
국비 코딩