mvc project 03 - ajax 03 - json
@ResponseBody를 사용해서 웹페이지로 데이터를 넘겼을 때
데이터가 문자열이 아니면 웹페이지에서 이를 해석하지 못합니다.
그래서 406 에러가 뜨게됩니다.
그래서 xml방식은 java에서 parsing하는 클래스를 따로 지원해주고 이를 전송합니다.
그러나 json방식은 java에서 클래스를 지원하지 않기 때문에 라이브러리를 추가해줘야합니다.
그러므로 pom.xml에 아래의 dependency를 추가해줍니다
<!-- json parser를 위한 library -->
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-lgpl</artifactId>
<version>1.9.13</version>
</dependency>
위의 라이브러리를 추가하면
별다른 클래스를 명시하지 않아도 json객체를 인식합니다.
객체는 모두 문자열 형태로 웹 페이지로 넘어가지만
웹 페이지에서 이 객체를 list객체로 인식하여 데이터를 추출할 수 있습니다.
1. 개발 환경 설정
1.1 maven update project
프로젝트 우클릭 - Maven - Update Project
1.2 dependency 추가
<!-- json parser를 위한 library -->
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-lgpl</artifactId>
<version>1.9.13</version>
</dependency>
2. 데이터 전달 객체
src/main/java/controller/MyModel.java
package controller;
import org.springframework.stereotype.Component;
@Component
public class MyModel { // POJO
String name, age;
String skills[];
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getAge() {
return age;
}
public void setAge(String age) {
this.age = age;
}
public String[] getSkills() {
return skills;
}
public void setSkills(String[] skills) {
this.skills = skills;
}
}
3. 컨트롤러 작성
src/main/java/controller/JsonController.java
package controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping("ajax_json")
public class JsonController {
@Autowired
private MyModel myModel;
@RequestMapping(method=RequestMethod.GET)
public String formBack(){
return "myForm";
}
@RequestMapping(method=RequestMethod.POST)
@ResponseBody
public MyModel getJson(
@RequestParam("name")String name,
@RequestParam("age")String age){
myModel.setName(name);
myModel.setAge(age);
myModel.setSkills(new String[]{"자바전문가","db관리","웹프로그래밍"});
return myModel;
}
}
src/main/java/controller/JsonListController.java
package controller;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping("ajax_json_list")
public class JsonListController {
@RequestMapping(method=RequestMethod.POST)
@ResponseBody
public Map<String, Object> getJson(
@RequestParam("name")String name,
@RequestParam("age")String age){
List<Map<String, String>> dataList = new ArrayList<Map<String,String>>();
Map<String, String> data = new HashMap<String, String>();
data.put("name", name);
data.put("age", age);
dataList.add(data);
data = new HashMap<String, String>();
data.put("name", "한국인");
data.put("age", "23");
dataList.add(data);
data = new HashMap<String, String>();
data.put("name", "홍길동");
data.put("age", "25");
dataList.add(data);
data = new HashMap<String, String>();
data.put("name", "신기루");
data.put("age", "35");
dataList.add(data);
Map<String, Object> data2 = new HashMap<String, Object>();
data2.put("datas", dataList);
return data2;
//list객체도 문자열 형태로 출력됨
}
}
4. 설정파일
src/main/webapp/WEB-INF/mvc-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
<!-- Uncomment and your base-package here:
<context:component-scan
base-package="org.springframework.samples.web"/> -->
<context:component-scan base-package="controller"/>
<mvc:annotation-driven />
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<!-- Example: a logical view name of 'showMessage' is mapped to '/WEB-INF/jsp/showMessage.jsp' -->
<property name="prefix" value="/WEB-INF/view/"/>
<property name="suffix" value=".jsp"/>
</bean>
</beans>
5. view
src/main/webapp/index.jsp
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html>
<head>
<meta charset="utf-8">
<title>Welcome</title>
</head>
<body>
<a href="ajax_json">비동기방식(json)</a>
</body>
</html>
src/main/webapp/WEB-INF/view/myForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//ajax json 객체 받기
$("#jsonOk").click(function(){
$("#showData").text("");
$.ajax({
type:"post",
url:"ajax_json",
data:{"name":$("[name=name]").val(),"age":$("[name=age]").val()},
datatype:"json",
success:function(data){ //data : 받아온 객체
var str = "";
str += data.name+"<br/>";
str += data.age+"<br/>";
str += data.skills[0]+"<br/>";
str += data.skills[1]+"<br/>";
str += data.skills[2]+"<br/>";
$("#showData").append(str);
},
error:function(){
$("#showData").text("에러발생");
}
});
})
//json list 객체 받기
$("#jsonListOk").click(function(){
frm.action="ajax_json_list";
frm.submit();
})
//ajax json list 객체받기
$("#ajaxJsonListOk").click(function(){
$("#showData").text("");
$.ajax({
type:"post",
url:"ajax_json_list",
data:{"name":$("[name=name]").val(),"age":$("[name=age]").val()},
datatype:"json",
success:function(data){
var str = "<table>";
var str = "<tr><td>인덱스</td><td>이름</td><td>나이</td>";
var list = data.datas;
$(list).each(function(index, objArr){
//index : list객체안 데이터의 번호( 예를 들면 list[0] --> 0이 index)
//objArr : list객체 안의 각 데이터
str += "<tr>";
str += "<td>" + index + "</td>";
str += "<td>" + objArr["name"] + "</td>";
str += "<td>" + objArr["age"] + "</td>";
str += "<tr/>";
});
str +="</table>";
$("#showData").append(str);
},
error:function(){
$("#showData").append("에러발생");
}
})
});
});
</script>
</head>
<body>
<h2>** ajax (json) **</h2>
<form action="ajax_json" id="frm" method="post">
이름 : <input type="text" name="name"> <br/>
나이 : <input type="text" name="age"> <br/>
json 데이터 받기 <input type="submit" value="전송"> <br/>
ajax json 객체 받기: <input type="button" id="jsonOk" value="클릭"><br/>
<br/>
list 객체
<br/>
json list 데이터 받기 <input type="button" id="jsonListOk" value="전송"> <br/>
ajax json list객체 받기: <input type="button" id="ajaxJsonListOk" value="클릭">
</form>
<div id="showData"></div>
</body>
</html>
pom.xml