[Spring] 스프링 정리10 - xml, JSON 형식 출력, AJAX

BACK END/Spring

[Spring] 스프링 정리10 - xml, JSON 형식 출력, AJAX

circle kim 2021. 1. 20. 23:43

[목차]

12. Ajax

① XML 형식 출력

② JSON 형식 출력

③ AJAX 처리

④ AJAX 처리- DB연동

[내용]

① XML 형식 출력

= sprweb17_xml

- index.jsp

<body>
  <h2>스프링으로 xml 형태의 결과 반환연습</h2>
  <a href="member">출발</a><br>
</body>

=> 요청명 member 전달.(GET방식)

- myform.jsp

<body>
	<h2>자료입력</h2>
	<form action="member" method="post">
	name : <input type="text" name="name" value="tom"><br>
	age : <input type="text" name="age" value="22"><br>
	<input type="submit">
	</form>
	<hr>
	<form action="member_xml" method="post">
	name : <input type="text" name="name" value="tom"><br>
	age : <input type="text" name="age" value="22"><br>
	<input type="submit">
	</form>
</body>

=> 상기 <form>태그 요청명 member 전달.(POST방식)

=> 하기 <form>태그 요청명 member_xml 전달.(POST방식)

- MemberController

@Controller
public class MemberController {
	@RequestMapping(value="member", method = RequestMethod.GET)
	public String formBack() {
		return "myform";
	}
	
	@RequestMapping(value="member", method = RequestMethod.POST)
	@ResponseBody // 자바객체를 Http 응답객체로 클라이언트에 전송 가능.
	public String submit(@RequestBody String formData) {
		// @RequestBody는 요청 몸체(body)에 있는 client의 요청 값을 그대로 받아들임.
		System.out.println("formData : "+formData); // name=tom&age=22
		formData+="hello";
		return formData; // @ResponseBody 사용 시 formData가 가진 값을 클라이언트에게 바로 송신.
	}
	...
}

=> @RequestBody : 요청의 Boby 값을 변수에 대입. ex) name=tom&age=22

=> @ResponseBody : 자바객체를 Http 응답객체로 클라이언트에 전송. 리턴 값을 클라이언트에 송신.

@Controller
public class MemberController {
	...
	@RequestMapping(value="member_xml", method = RequestMethod.POST)
	@ResponseBody
	public XmlMessageList submit_xml(@RequestParam("name") String name,
					@RequestParam("age") String age) {
		System.out.println(name+" "+age);
		return getXml(name, age);
	}
	
	public XmlMessageList getXml(String name, String age) {
		List<XmlMessage> messages = Arrays.asList(
				new XmlMessage(name, age),
				new XmlMessage("oscar", "25"),
				new XmlMessage("emma", "24")
				);
		return new XmlMessageList(messages);
	}
}

=> 요청명 member_xml(Post방식) 일 경우 실행.

=> @ResponseBody : getXml()의 리턴값을 클라이언트에서 출력한다.

- XmlMessage

@XmlAccessorType(XmlAccessType.FIELD)
//@XmlType(name="", propOrder = {"name","age"})
public class XmlMessage {
	private String name;
	private String age;
	
	public XmlMessage() {
	}
	
	public XmlMessage(String name, String age) {
		this.name = name;
		this.age = age;
	}
	
	public String getName() {
		return name;
	}
	
	public String getAge() {
		return age;
	}
	
	public void setAge(String age) {
		this.age = age;
	}
	public void setName(String name) {
		this.name = name;
	}
}

- XmlMessageList

@XmlAccessorType(XmlAccessType.FIELD)
@XmlRootElement(name = "msg-list") // Root Element 이름 지정
public class XmlMessageList {
	
	@XmlElement(name = "msg")
	private List<XmlMessage> messages;
	
	public XmlMessageList() {
	}
	
	public XmlMessageList(List<XmlMessage> messages) {
		this.messages = messages;
	}
	
	public List<XmlMessage> getMessages(){
		return messages;
	}
}

② JSON 형식 출력

= sprweb18_json

- index.jsp

<body>
	<h2>JSON 기초연습</h2>
	<a href="list1?name=james">json 처리1 : 단일자료</a><br>
	<a href="list2">json 처리2 : 복수자료</a><br>
</body>

- JsonController

@Controller
@RequestMapping("list1")
public class JsonController {
	@Autowired
	private MyModel myModel;
	
	@RequestMapping(method = RequestMethod.GET)
	@ResponseBody // 결과를 JSON형식으로 클라이언트 브라우저에 송신.
	public MyModel getJson(@RequestParam("name") String name) {
		myModel.setName(name);
		myModel.setSkills(new String[] {"자바 전문 개발자", "DB 선수", "web 전문가"});
		return myModel;
	}
}

- JsonController2

@Controller
@RequestMapping("list2")
public class JsonController2 {
	@RequestMapping(method = RequestMethod.GET)
	@ResponseBody
	public Map getJsons() {
		ArrayList<Map<String, String>> dataList = new ArrayList<Map<String, String>>();
		
		Map<String, String> data =new HashMap<String, String>();
		
		data.put("name", "한국인");
		data.put("age", "22");
		dataList.add(data);
		
		data =new HashMap<String, String>();
		data.put("name", "신기해");
		data.put("age", "32");
		dataList.add(data);
		
		data =new HashMap<String, String>();
		data.put("name", "한가해");
		data.put("age", "33");
		dataList.add(data);
		
		//return data; // 마지막 자료만 리턴됨.
		Map<String, Object> data2 = new HashMap<String, Object>();
		data2.put("datas", dataList);
		
		return data2;
	}
}

- MyModel

@Component
public class MyModel {
	private String name;
	private String skills[];
	
	public String getName() {
		return name;
	}
	
	public void setName(String name) {
		this.name = name;
	}
	
	public String[] getSkills() {
		return skills;
	}
	
	public void setSkills(String[] skills) {
		this.skills = skills;
	}
}

③ AJAX 처리

= sprweb19_ajax

- json_test.jsp

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ // : text만 먼저 수행.
// js : window.onload= function(){} : 모든 페이지 로딩 완료 후 수행.
	//alert("수행");
	$("#btnOk1").click(function(){
		//alert("수행2");
		$("#showData").html("");
		$.ajax({ // get()/post()
			type:"get",
			url:"list1",
			data:{"name":"john"}, //name = "john"
			dataType:"Json",
			success:function(data){
				//alert(data);
				var str ="";
				str += data.name +"<br>";
				str += data.skills[0] +" ";
				str += data.skills[1] +" ";
				str += data.skills[2] +" ";
				$("#showData").html(str);
			},
			error:function(data){
				$("#showData").text("에러 발생");
			}
		});
	});
	$("#btnOk2").click(function(){
		//alert("수행3");
		$.ajax({
			type:"get",
			url:"list2",
			dataType:"Json",
			success:function(data){
				var str = "<table>";
				var list = data.datas;
				$(list).each(function(ind, obj){
					str += "<tr>";
					str += "<td>"+obj["name"]+"</td>";
					str += "<td>"+obj["age"]+"</td>";
					str += "</tr>";
				});
				str += "</table>";
				$("#showData").html(str);
			},
			error:function(data){
				$("#showData").html("<b>에러 발생</b>");
			}
			
		});
	});
});
</script>
</head>
<body>
	<h2>* Ajax</h2>
	<input type="button" id="btnOk1" value="한개의 자료 읽기"><br>
	<input type="button" id="btnOk2" value="여러개의 자료 읽기"><br>
	<div id="showData">msg</div>
</body>

④ Ajax처리 - DB연동

- DB연동

= sprweb20_ajax_db

- servlet-context.xml

<context:component-scan base-package="pack.controller" />
<context:component-scan base-package="pack.model" />

- root-context.xml

<bean class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
	<property name="locations">
		<value>classpath:pack/mybatis/db.properties</value>
	</property>
</bean>

<bean id="dataSource" class="org.springframework.jdbc.datasource.SimpleDriverDataSource">
	<property name="driverClass" value="${driver}"/>
	<property name="url" value="${url}"/>
	<property name="username" value="${username}"/>
	<property name="password" value="${password}"/>
</bean>

<bean class="org.mybatis.spring.SqlSessionFactoryBean">
	<property name="dataSource" ref="dataSource"/>
	<property name="configLocation" value="classpath:pack/mybatis/Configuration.xml"></property>
</bean>

- db.properties

driver=org.mariadb.jdbc.Driver
url=jdbc:mysql://127.0.0.1:3306/test
username=root
password=123

- Configuration.xml

<configuration>
 <typeAliases>
 	<typeAlias type="pack.model.SangpumDto" alias="dto"/>
 	<typeAlias type="pack.controller.SangpumBean" alias="formBean"/>
 </typeAliases>
 <!--  DB 연결을 root-context.xml에서 하도록 수정.-->
 <mappers>
  <mapper resource="pack/mybatis/DataMapper.xml" />
 </mappers>
</configuration>

- DataMapper.xml

<mapper namespace="dev">
 <select id="selectAll" resultType="dto">
  select * from sangdata
 </select>
</mapper>

- index.jsp

<body>
	<ul>
		<li>메뉴 1</li>
		<li>메뉴 2</li>
		<li><a href="sangpum">상품보기1(json)</a></li>
		<li><a href="sanglist.jsp">상품보기2(ajax)</a></li>
	</ul>
</body>

- SangpumController

@Controller
public class SangpumController {
	@Autowired
	private DataDao dataDao;
	
	@RequestMapping("sangpum")
	@ResponseBody // Body를 통채로 송부한다.
	public Map<String, Object> abc(){ // JSON은 Map을 리턴해야한다.
		List<Map<String, String>> dataList = new ArrayList<Map<String, String>>();
		
		Map<String, String> data = null;
		List<SangpumDto> sangList = dataDao.sangpumList(); // DB에서 데이터를 받아온다.
		
		for(SangpumDto s : sangList) {
			data = new HashMap<String, String>();
			data.put("code", s.getCode()); // key, value 형식으로 DB값을 담는다. 
			data.put("sang", s.getSang());
			data.put("su", s.getSu());
			data.put("dan", s.getDan());
			dataList.add(data); // List에 Record 값을 넣는다.
		}
		
		Map<String, Object> sangpumDatas = new HashMap<String, Object>();
		sangpumDatas.put("datas", dataList); // Map에 List를 담아 전송한다.
		return sangpumDatas; // JSON은 Map을 리턴해야한다.
	}
}

- DataDao

@Repository
public class DataDao extends SqlSessionDaoSupport{
	public DataDao(SqlSessionFactory factory) {
		setSqlSessionFactory(factory);
	}
	public List<SangpumDto> sangpumList(){
		List<SangpumDto> list = getSqlSession().selectList("selectAll");
		return list;
	}
}

- SangpumDto

public class SangpumDto {
	private String code, sang, su, dan;
    //getter/setter
}

- sanglist.jsp

<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$("#btnShow").click(function(){ // 버튼 클릭시 실행.
			$("#showData").empty(); // div의 내용 비우기.
			$.ajax({
				type:"get",
				url:"sangpum",
				dataType:"json",
				success:function(sangData){
					var str = "<table border='1'>";
					str+="<tr><th>코드</th><th>품명</th><th>수량</th><th>단가</th></tr>";
					let list = sangData.datas;
					$(list).each(function(idx, arr){
						str += "<tr>";
						str += "<td>"+arr["code"]+"</td>";
						str += "<td>"+arr["sang"]+"</td>";
						str += "<td>"+arr.su+"</td>";
						str += "<td>"+arr.dan+"</td>";
						str += "</tr>";
					});
					str+="</table>";
					$("#showData").html(str);
				},
				error:function(){
					$("#showData").text("에러발생");
				}
			});
		});
	});
	</script>
</head>
<body>
	<button id="btnShow">show</button>
	<h2>상품자료(@MVC - Ajax)</h2>
	<div id="showData"></div>
</body>