728x90
Spring 비동기처리
스프링 레거시 프로젝트에서는 별도의 라이브러리없이 비동기처리를 진행할 수 있습니다. .ajax() 비동기 요청시 JSON 데이터를 주고받을 수 있는데 JSON 데이터는 { key : value } 형태로 Map 컬렉션과 유사합니다.
TEST1
<%@ 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="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head>
<body>
<img alt="디폴트 이미지" src="images/default.jpg" id="photo">
<script type="text/javascript">
var cnt = 1; // scope 이슈 확인할 것
$("#photo").on("click", function() {
console.log("로그 : 이미지 클릭함");
//var testData = {키값: value값, 키값: value값, ...}; // JSON 데이터
var testData = {count: cnt, apple: 1234, banana: 'kiwi'};
$.ajax({
url : "test1.do",
type : "POST",
data : testData,
success : function(result) {
console.log("로그 : 성공 !" + result);
},
error : function() {
console.log("로그 : 에러발생...");
}
});
});
</script>
</body>
</html>test1.jsp
package com.spring.view.controller;
import java.util.Map;
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
public class TestController {
@RequestMapping(value = "/test1.do", method = RequestMethod.POST)
@ResponseBody
public String test1() {
System.out.println("로그 : .ajax()메서드 수행함");
return "JUN";
}
}TestController.java
현재 클래스에서 @Controller, @RequestMapping을 사용 중입니다.
비동기 처리 시 페이지 이동을 원하는 것이 아니라 데이터를 전달하는 것이 목표이기 때문에 @ResponseBody 어노테이션을 사용합니다.
TEST2 - 1
<%@ 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="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head>
<body>
<img alt="디폴트 이미지" src="images/default.jpg" id="photo">
<script type="text/javascript">
var cnt = 1; // scope 이슈 확인할 것
$("#photo").on("click", function() {
console.log("로그 : 이미지 클릭함");
console.log("cnt : " + cnt);
//var testData = {키값: value값, 키값: value값, ...}; // JSON 데이터
var testData = {count: cnt, apple: 1234, banana: 'kiwi'};
$.ajax({
url : "test2.do",
type : "POST",
data : testData,
success : function(result) {
console.log("로그 : 성공 !" + result);
cnt = result;
if (cnt % 2 == 0) {
$("#photo").prop("src", "images/default.jpg");
}
else {
$("#photo").prop("src", "images/test.png");
}
},
error : function() {
console.log("로그 : 에러발생...");
}
});
});
</script>
</body>
</html>test2.jsp
package com.spring.view.controller;
import java.util.Map;
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
public class TestController {
@RequestMapping(value = "/test2.do", method = RequestMethod.POST)
@ResponseBody
public String test2(@RequestParam("count")int count,
@RequestParam("apple")String apple,
@RequestParam("banana")String banana) {
System.out.println("count : " + count);
System.out.println("apple : " + apple);
System.out.println("banana : " + banana);
count++;
return String.valueOf(count);
}
}TestController.java
@RequestParam으로 View에서 보내는 데이터를 명시하여 전달 받은 후 사용할 수 있습니다.
TEST2 - 2
package com.spring.view.controller;
import java.util.Map;
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
public class TestController {
@RequestMapping(value = "/test3.do", method = RequestMethod.POST)
@ResponseBody
public String test3(@RequestParam Map<String, Object> map) {
System.out.println("count : " + map.get("count"));
System.out.println("apple : " + map.get("apple"));
System.out.println("banana : " + map.get("banana"));
int count = Integer.parseInt(map.get("count").toString());
count++;
System.out.println(Integer.toString(count));
return Integer.toString(count);
}
}TestController.java
@RequestParam을 사용하여 데이터를 보낼 때 파라미터가 길어지기 때문에 JSON 데이터 형식과 유사한 Map을 사용합니다.
GitHub
https://github.com/Qkrwnsgus0522/Spring
GitHub - Qkrwnsgus0522/Spring
Contribute to Qkrwnsgus0522/Spring development by creating an account on GitHub.
github.com
728x90
