[자바스크립트] Spring에서 Ajax 사용하기
17491 단어 @ResponseBodyajax@ResponseBody
@ResponseBody를 사용하면 return 값이 그대로 브라우저에 전송된다.
//현재 시대적 추세가 백엔드를 이해하는 프론트엔지니어를 원함
//@ResponseBody를 쓰면 return 값이 그대로 브라우저로 전송됨
//@Controller + @ResponseBody를 @RestController를 쓰기도 함
//@ResponseBody 보통 method위에 붙여준다.
@Controller
public class AjaxController {
@ResponseBody
@RequestMapping(value = "/testResponse", method = RequestMethod.GET)
public String returnDirect() {
return "It's Rainning";
}
}
=> It's Rainning이라는 JSP를 찾는게 아니라 It's Rainning을 그대로 브라우저에 출력한다.
@Controller
public class AjaxController {
@ResponseBody
@RequestMapping(value = "/testResponse", method = RequestMethod.GET)
public Map<String, String> returnDirect() {
Map<String, String> myMap = new HashMap<String, String>();
myMap.put("비", "0");
myMap.put("비비", "00");
myMap.put("비비비", "000");
myMap.put("비비비비", "0000");
//보통 List나 Map을 많이 리턴함
return myMap;
}
}
=> 에러 발생(브라우저는 자바의 Map을 모르기 때문에)
list나 Map을 json형식으로 변환시켜줘야 함.
이걸 가능하게 해주는 것이 Maven Repository의 Jackson Databind
최신버전 선택해서 가져오기 > pom.xml에 붙여넣고 Run As > 4. Maven
list나 Map을 xml로 바꿔주는 것은 Jackson Dataformat
위 두 가지를 pom.xml에 적용 후, Map을 출력한다.
Map을 xml이 아닌 jason으로 출력하고 싶을 때 :
Get 방식
Controller
package kr.or.ddit.car;
import java.util.HashMap;
import java.util.Map;
import org.apache.commons.collections.map.HashedMap;
import org.springframework.http.MediaType;
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.ResponseBody;
//현재 시대적 추세가 백엔드를 이해하는 프론트엔지니어를 원함
//@ResponseBody를 쓰면 return 값이 그대로 브라우저로 전송됨
//@Controller + @ResponseBody를 @RestController를 쓰기도 함
//@ResponseBody 보통 method위에 붙여준다.
@Controller
public class AjaxController {
@ResponseBody
@RequestMapping(value = "/testResponse", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
public Map<String, String> returnDirect(String myParam1) {
System.out.println(myParam1); // 값 넘어왔는지 체크
Map<String, String> myMap = new HashMap<String, String>();
myMap.put("비", "0");
myMap.put("비비", "00");
myMap.put("비비비", "000");
myMap.put("비비비비", "0000");
//보통 List나 Map을 많이 리턴함
//브라우저는 자바의 Map을 모르기 때문에, 사전에 에러가 남
return myMap;
}
}
JSP
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<input type="button" id="id_btn1">
<script type="text/javascript">
var v_btn1 = document.querySelector("#id_btn1");
var v_ajax = new XMLHttpRequest(); // 통신 대신 해줄 아저씨 생성
v_ajax.open("get", "/testResponse?myParam1=batman", true) // 아저씨가 할일 지정 - true는 비동기, false는 동기
v_ajax.onreadystatechange = function(){ // 상황 변화 있으면 연락주세요
if(v_ajax.readyState == 4 && v_ajax.status == 200){ // 통신이 잘 완료되었다면
console.log(JSON.parse(v_ajax.responseText)); //json형식으로 변환(JSON.parse)
}
}
v_ajax.send(); //아저씨 일 하세요
console.log("콘솔에 찍기");
</script>
</body>
</html>
Post 방식
Controller
@Controller
public class AjaxController {
@ResponseBody
@RequestMapping(value = "/testResponse", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
public Map<String, String> returnDirectPost(String myParam1) {
System.out.println(myParam1); // 값 넘어왔는지 체크
Map<String, String> myMap = new HashMap<String, String>();
myMap.put("비", "0");
myMap.put("비비", "00");
myMap.put("비비비", "000");
myMap.put("비비비비", "0000");
//보통 List나 Map을 많이 리턴함
//브라우저는 자바의 Map을 모르기 때문에, 사전에 에러가 남
return myMap;
}
}
JSP
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<input type="button" id="id_btn1">
<script type="text/javascript">
var v_btn1 = document.querySelector("#id_btn1");
var v_ajax = new XMLHttpRequest(); // 통신 대신 해줄 아저씨 생성
//v_ajax.open("get", "/testResponse?myParam1=batman", true) // 아저씨가 할일 지정 - true는 비동기, false는 동기 Get방식일때 parameter로 넘기고
v_ajax.open("post", "/testResponse", true) //Post방식일 때
//post방식으로 보낼 때 아래 내용 필요, jQuery Ajax는 자동으로 항상 해줌 - 꼭 send 전에 해줘야함
v_ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
v_ajax.onreadystatechange = function(){ // 상황 변화 있으면 연락주세요
if(v_ajax.readyState == 4 && v_ajax.status == 200){ // 통신이 잘 완료되었다면
console.log(JSON.parse(v_ajax.responseText)); //json형식으로 변환(JSON.parse)
}
}
// v_ajax.send(); //get 방식일 때 사용
v_ajax.send("myParam1=wonderWoman"); //post 방식일 때 send안에 넘길 값 적어줌
console.log("콘솔에 찍기");
</script>
</body>
</html>
Author And Source
이 문제에 관하여([자바스크립트] Spring에서 Ajax 사용하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gksmf6699/자바스크립트-Ajax저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)