Talented API Test 크롬 확장프로그램 설치해서 즉시즉시 테스트해보기
GET 방식 Ajax 전송 (Vanilla JS)
1. 문자열 형태로 전송
var data = "1,2,3,4,5"
ajax.open("GET", "./ajax1.do?product=" + data, false)
- 백에서 @RequestParam(name="product") String data로 받으면 "1,2,3,4,5" 문자열 그대로 들어옴
- split(",")로 처리해야 함
2. 배열 형태로 전송
var data = ["홍길동", "강감찬", "유관순"]
ajax.open("GET", "./ajax1.do?product=" + data, false)
- 배열을 product=홍길동,강감찬,유관순 형태로 보내게 됨
- 백에서 @RequestParam(name="product") String[] data로 받으면 알아서 배열로 변환됨
- 단, 배열로 받고 싶다면 product[]=홍길동&product[]=강감찬처럼 보내는 게 더 명확함
POST 방식 Ajax 전송 (Vanilla JS)
1. application/x-www-form-urlencoded
ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded")
ajax.send("product=" + data) // ex: product=홍길동,강감찬,이순신
- 백에서 @RequestParam(name="product") String[]으로 받을 경우 자동 분리 처리 가능
2. FormData 이용 (multipart/form-data)
var formdata = new FormData()
formdata.append("pd", "홍길동")
formdata.append("pd", "이순신")
formdata.append("pd", "유관순")
ajax.send(formdata)
- setRequestHeader 없이 전송해야 함
- 백에서 HttpServletRequest로 받아 getParameterValues("pd") 등으로 처리
3. JSON.stringify로 전송
ajax.setRequestHeader("content-type", "application/json")
ajax.send(JSON.stringify({ pd: ["홍길동", "강감찬", "유관순"] }))
- 백에서 @RequestBody Map<String, Object> 또는 DTO로 받음
jQuery Ajax 전송
1. GET + JSON.stringify
var data = ["홍길동", "이순신", "장보고"]
$.ajax({
url: "./ajax5.do?no=" + encodeURI(JSON.stringify(data)),
type: "GET",
success: function(result) { console.log(result) }
})
- JSON.stringify 결과를 쿼리 문자열로 전달
- 백에서 @RequestParam(name="no") String json → 다시 new JSONArray(json) 등으로 파싱
2. POST + JSON.stringify
var data = ["홍길동", "이순신", "장보고"]
$.ajax({
url: "./ajax6.do",
type: "POST",
contentType: "application/json",
data: JSON.stringify({ userdata: data }), // 키 있는 방식
})
- 백에서 @RequestBody Map<String, Object> 또는 DTO로 받음
3. POST + 문자열 (DTO 연결)
var data = "pd1=홍길동&pd2=이순신&pd3=장보고"
$.ajax({
url: "./ajax7.do",
type: "POST",
data: data
})
- DTO에서 private String pd1, pd2, pd3 식으로 매핑해 받을 수 있음
- @ModelAttribute 또는 @RequestParam Map<String, String>도 사용 가능
4. POST + FormData
var formdata = new FormData()
formdata.append("fdata", "a1")
formdata.append("fdata", "a2")
$.ajax({
url: "./ajax8.do",
type: "POST",
data: formdata,
processData: false,
contentType: false
})
- multipart/form-data 전송
- 백에서 HttpServletRequest.getParameterValues("fdata")로 받음
정리 요약
방식 JS 전송 방법 백엔드 수신 방법
| GET + 문자열 | ?product=1,2,3 | String data or String[] data |
| GET + 배열 | product=1&product=2 | String[] data |
| POST + x-www-form-urlencoded | product=홍길동,강감찬 | @RequestParam String[] |
| POST + JSON | application/json | @RequestBody DTO 또는 Map |
| POST + FormData | FormData 객체 | HttpServletRequest |
전체 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax (GET) - 문자열, Array를 이용한 데이터 전송</title>
</head>
<body>
<!--
1. ajax => form 태그로 전송하지 않음!!!
2. FormData 함수 사용하여 전송
3. ajax는 브라우저의 URL이 변경되지 않음 //페이지 자체에서 값을 변경
4. Back-end가 무조건 결과값을 Front-end에게 전송해줘야함
-->
<input type="button" value="전송" onclick="ajax_gopage()">
</body>
<!--
ajax GET 통신 (선택된 상품만 Back-end 전송)
1. 같은 이름으로 문자열로 보내면 될까요? ㅇㅁㅇ? => ./ajax1.do?product=1,2,3,4,5
2. 키를 이용하여 배열로 보내면 될까요? ㅇㅅㅇ? => product=['1','2','3','4','5']
-->
<script src="./ajax1.js?v=1"></script>
</html>
=====
//ajax => GET 통신
function ajax_gopage() {
var ajax, result;
//ajax 동기화 : Back-end에 값을 받아야만 처리 후 다음 결과를 작동시키는 원리
//ajax 비동기화 : Back-end 값을 받지 않아도 다음 처리할 항목을 전송시킬수 있음
/*
//js를 이용한 ajax 기본베이스
ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
console.log(this.response); //Back-end값 출력
}
}
}
//첫 파라미터에 GET인지 POST인지 넣어서 사용
ajax.open("", "", false); //false : 동기화, true : 비동기화 => 이것도 백,프론트 소통하기 (아무것도안쓰면 기본 true)
ajax.send();
*/
/*
//GET으로 같은 이름의 문자열로 보내기 => ./ajax1.do?product=1,2,3,4,5
var data = "1,2,3,4,5";
ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
console.log(this.response);
}
}
}
ajax.open("GET", "./ajax1.do?product="+data, false);
ajax.send();
*/
//GET으로 배열로 보내기 => product=['1','2','3','4','5']
var data = new Array();
data[0] = "홍길동";
data[1] = "강감찬";
data[2] = "유관순";
ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
console.log(this.response);
}
}
}
ajax.open("GET", "./ajax1.do?product="+data, false);
ajax.send();
}
=====
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax (POST) - Array</title>
</head>
<body>
<input type="button" value="전송" onclick="ajax_gopage()">
</body>
<!--
POST 값 전송
1. Array를 이용하여 데이터 전송
2. FormData를 이용하여 데이터 전송
3. JSON.stringify를 이용하여 데이터 전송
-->
<script src="./ajax2.js?v=1"></script>
</html>
=====
//ajax => POST 통신
function ajax_gopage() {
var ajax, result;
/*
ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
console.log(this.response);
}
}
}
ajax.open("", "", false);
ajax.send();
*/
var data = new Array();
data[0] = "홍길동";
data[1] = "강감찬";
data[2] = "이순신";
ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
console.log(this.response);
}
}
}
ajax.open("POST", "./ajax2.do", true);
//POST 전송시 해당 content-type을 설정하여 전송
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); //뒷 파라미터는 form의 enc-type 컨스페하면 나옴
ajax.send("product="+data); //해당 key name + 배열 데이터 (여러개를 태울땐 &로 이어줌)
}
=====
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax (POST) - FormData</title>
</head>
<body>
<input type="button" value="전송" onclick="ajax_gopage()">
<input type="button" value="전송 form 키가 다를 경우" onclick="ajax_gopage2()">
</body>
<!--
POST 값 전송
1. Array를 이용하여 데이터 전송
2. FormData를 이용하여 데이터 전송
3. JSON.stringify를 이용하여 데이터 전송
-->
<script src="./ajax3.js?v=3"></script>
</html>
=====
//ajax => POST 통신
function ajax_gopage() {
var ajax, result;
/*
ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
console.log(this.response);
}
}
}
ajax.open("", "", false);
ajax.send();
*/
//FormData
var data = new FormData();
/*
//다른키 사용시 => 문자열로 각 키별로 셋팅 => get
data.append("pd1","홍길동"); //append("키명","데이터")
data.append("pd2","이순신");
data.append("pd3","유관순");
console.log(data.get("pd1")); //출력시 get이용
*/
//동일한 키 사용시 => 원시배열형태로 구성 => getAll
data.append("pd","홍길동");
data.append("pd","이순신");
data.append("pd","유관순");
//출력시 getAll사용
//console.log(data.getAll("pd")); //무조건 배열로 설정 (같은 키일때 getAll)
ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
console.log(this.response);
}
}
}
/*
setRequestHeader 전송방식 (동시에 여러방식 불가능)
1. "content-type","application/x-www-form-urlencoded" : name값으로 문자 전송
2. "content-type","application/json" : json 배열의 값을 이용하여 전송 - formData 전용
3. "content-type","multipart/form-data" : IO 형태의 값을 전송
4. "가상의 키","값" : 한글값은 전송 불가능 Controller에서 @RequestHeader 사용
*/
ajax.open("POST", "./ajax3.do", true);
//다른 키 사용시 하나밖에 전송이 안됨
//ajax.send("pd",data); //하나밖에 안감
ajax.setRequestHeader("content-type","application/json"); //1번방식으로 보내면 백에서 못받음
ajax.send(data); //formdata함수로 생성된 객체를 전송 (키없이 전송) => 백에서 바디로 받기
//네번째 방식
//ajax.setRequestHeader("user","lee"); //user라는 key, lee라는 value
//ajax.send();
}
//키가 다 다른 이름일때
function ajax_gopage2(){
var ajax, result;
var data = [];
data.push(
{ "pd": "홍길동" }
);
data.push(
{ "pd": "강감찬" }
);
data.push(
{ "pd": "유관순" }
);
ajax = new XMLHttpRequest();
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
console.log(this.response); // Back-end값 출력
}
}
ajax.open("POST","./ajax4.do",true);
ajax.send(JSON.stringify(data));
}
=====
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax - Jquery로 전송 (GET) - JSON.stringify 를 이용한 전송</title>
<script src="./jquery.js?v=1"></script>
<script>
$(function(){
$("#btn").click(function(){
var $ajaxdata = new Array();
$ajaxdata[0] = "홍길동";
$ajaxdata[1] = "이순신";
$ajaxdata[2] = "장보고";
var $fdata = JSON.stringify($ajaxdata); //JSON.stringify : JSON 배열화
//encodeURI : UTF-8 인코딩 함수 표준 문자로 변환
$.ajax({
url : "./ajax5.do?no="+encodeURI($fdata), //JSON배열이라서 이렇게 사용
cache:false, //캐시메모리 사용 유무
type:"GET", //전송방식
dataType:"html", //전송방식 형태 HTML, TXT, XML, JSON
async : true, //true : 비동기 , false : 동기화 , 기본값 true
success:function($result){
console.log($result);
},error:function(){
console.log("Back-end와 통신 오류 발생");
}
});
});
});
</script>
</head>
<body>
<input type="button" value="전송" id="btn">
</body>
</html>
=====
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax - Jquery로 전송 (Post) - JSON.stringify</title>
<script src="./jquery.js?v=1"></script>
<script>
$(function() {
var $ajaxdata = new Array();
$ajaxdata[0] = "홍길동";
$ajaxdata[1] = "이순신";
$ajaxdata[2] = "장보고";
//JSON.stringify 전송 : 대표키로 보낼까요? 대표키 없이 보낼까요?
$("#btn").click(function() {
$.ajax({
url : "./ajax6.do",
cache : false,
type : "POST",
dataType : "html",
contentType: "application/json;", //이거 안쓰면 한글 깨짐 중요!
//data: JSON.stringify($ajaxdata), //대표키 없는 경우
data: JSON.stringify({userdata:$ajaxdata}), //대표키 있는 경우
async : true,
success : function($result) {
console.log($result);
},
error : function($error) {
console.log($error);
}
});
});
});
</script>
</head>
<body>
<input type="button" value="전송" id="btn">
</body>
</html>
=====
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax - Jquery로 전송 (Post) - JSON.stringify (DTO연결)</title>
<script src="./jquery.js?v=1"></script>
<script>
$(function() {
//dto로 보내는 방법의 변수
//Back-end가 DTO형태 기준으로 정보를 요청하였을 경우
var $userdata = "pd1=구나영&pd2=이주은&pd4=윤하빈";
$("#btn").click(function() {
$.ajax({
url : "./ajax7.do",
cache : false,
type : "POST",
dataType : "html",
/*
//각각의 다른 키로 데이터를 받아서 처리 JSON.stringify
contentType: "application/json;",
data : JSON.stringify({
pd1 : "구나영",
pd3 : "이주은",
pd4 : "윤하빈"
}),
*/
data : $userdata, //JSON.stringify 미사용
success : function($result) {
console.log($result);
},
error : function($error) {
console.log($error);
}
});
});
});
</script>
</head>
<body>
<input type="button" value="전송" id="btn">
</body>
</html>
=====
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax - Jquery로 전송 (Post) - FormData</title>
<script src="./jquery.js?v=1"></script>
<script>
$(function() {
$("#btn").click(function() {
var $formdata = new FormData();
$formdata.append("fdata","a1");
$formdata.append("fdata","a2");
$formdata.append("fdata","a3");
$formdata.append("fdata","a4");
$formdata.append("fdata","a5");
//POST,GET
$.ajax({
url:"./ajax8.do",
cache:false,
type:"POST",
dataType:"HTML",
contentType : false, //파싱되는 사항을 방지
processData : false, //String으로 변환하여 전송
data : $formdata, //formdata로 전송
success : function($result) {
console.log($result);
},
error : function($error) {
console.log($error);
}
});
});
});
</script>
</head>
<body>
<input type="button" value="전송" id="btn">
</body>
</html>
=====
package api;
import java.io.PrintWriter;
import java.util.Iterator;
import javax.servlet.ServletResponse;
import org.json.JSONArray;
import org.json.JSONObject;
import org.json.JSONParserConfiguration;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestHeader;
import org.springframework.web.bind.annotation.RequestParam;
import com.mysql.cj.xdevapi.JsonParser;
@Controller
public class api_controller {
// log로 문제사항 및 실행사항을 체크하는 라이브러리
private static final Logger logger = LoggerFactory.getLogger(api_controller.class);
/*
// this.logger.info : 해당 메소드에서 실행된 값을 출력하는 역할
// this.logger.error : catch에서 사용하는 형태 error발생시 출력되는 메세지
// this.logger.debug : 해당 코드가 정상적으로 작동하는 테스트 메세지를 출력할 때 씀
// this.logger.trace : 해당 코드에 문제가 발생시 좀 더 상세하게 문제사항을 출력
// this.logger.warn : 현재 코드에 대해서 향후 문제가 발생 될 수 있는 원인에 대한 메세지 출력
// this.logger.fatal : 치명적인 오류 발생시 출력되는 역할
*/
// js - Ajax(GET)
PrintWriter pw = null;
// 문자열 + ok, no, error
@GetMapping("/ajax/ajax1.do")
// public String ajax1(@RequestParam(name = "product") String data, ServletResponse res) {
public String ajax1(@RequestParam(name = "product") String data[], ServletResponse res) {
// this.logger.info(data);
// Front-end에서 보낸 name을 원시배열로 받을 경우 자동으로 배열로 변경처리
// 단, String으로 배열 자료형을 사용하지 않을 경우 split을 이요ㅕㅇ하여 값을 분리시켜야함
// => 프론트에서 배열로 보냈는데 data[]가 아니라 data로 받은경우
// ,로 이어진 문자열로 받음 => split 사용 or 그냥 배열로 받기 data[]
this.logger.info(data[0]);
this.logger.info(data[1]);
this.logger.info(data[2]);
try {
this.pw = res.getWriter();
this.pw.print("ok");
} catch (Exception e) {
this.logger.error(e.toString());
}
return null;
}
//POST
//Array 형태로 전송시 GET형태의 메소드와 동일하게 POST 값을 받음
@PostMapping("/ajax/ajax2.do")
public String ajax2 (@RequestParam(name = "product") String pd[], ServletResponse res) {
try {
this.logger.info(pd[0]);
this.pw = res.getWriter();
this.pw.write("ok");
}catch (Exception e) {
this.logger.error(e.toString());
}
return null;
}
// POST
// Formdata 형태로 전송시
// @RequestHeader : ajax에서만 사용하는 Headers의 값이며, 키에 맞는 데이터를 가져올 수 있음
// Front-end에서 setRequestHeader("키","값")을 보낼 경우에만 사용함
// @RequestBody : name없음!
// ajax.setRequestHeader("content-type","application/json"); 로 전송되었을 경우 사용
@PostMapping("/ajax/ajax3.do")
public String ajax3(
// @RequestHeader(name = "User") String user, //첫글자 대문자로 기본으로 잡혀있음
@RequestBody String pd,
ServletResponse res) {
try {
// this.logger.info(user);
this.logger.info(pd);
this.pw = res.getWriter();
this.pw.write("ok");
} catch (Exception e) {
this.logger.error(e.toString());
}
return null;
}
//모두 다른 키일때
//json으로 보내면 무조건 @RequestBody로 받기
//JSON.stringify : Front-end가 전송시 무조건 @RequestBody로 처리하기
@PostMapping("/ajax/ajax4.do")
public String ajax4(
@RequestBody String pd, //DTO로 받는 경우 키가 정확해야함
ServletResponse res) {
try {
this.logger.info(pd);
JSONArray ja = new JSONArray(pd);
this.logger.info(String.valueOf(ja.length()));
int w = 0;
while(w <ja.length()) {
JSONObject jo = (JSONObject)ja.get(w);
String usernm = jo.get("pd").toString();
this.logger.info(usernm);
w++;
}
this.pw = res.getWriter();
this.pw.write("ok");
} catch (Exception e) {
this.logger.error(e.toString());
}
return null;
}
//Jquery - 배열값을 GET으로 받아서 처리한 메소드
@GetMapping("/ajax/ajax5.do")
public String ajax5(@RequestParam("no") String no, //DTO로 받는 경우 키가 정확해야함
ServletResponse res) {
try {
this.logger.info(no);
JSONArray ja = new JSONArray(no); //[]로 묶여있으니까 Array로 풀기
int w = 0;
while(w < ja.length()) {
this.logger.info(ja.getString(w).toString());
w++;
}
this.pw = res.getWriter();
this.pw.write("ok");
}catch (Exception e) {
}
return null;
}
//Ajax - Jquery로 전송 (Post) 대표키가 없는 경우
@PostMapping("/ajax/ajax6.do")
public String ajax6(@RequestBody String all_data,
ServletResponse res) {
try {
this.logger.info(all_data);
//대표키 있는 경우
JSONObject jo = new JSONObject(all_data);
this.logger.info(jo.get("userdata").toString());
/*
//대표키 없는 경우
JSONArray ja = new JSONArray(all_data); //[]로 묶여있으니까 Array로 풀기
int w = 0;
while(w < ja.length()) {
this.logger.info(ja.getString(w).toString());
w++;
}
*/
this.pw = res.getWriter();
this.pw.write("ok");
}catch (Exception e) {
}
return null;
}
//각각의 다른 키로 POST 전송 (Jquery)
//프론트에서 dto로 보내도 일단을 body String으로 받아야함
//각각의 다른 키로 데이터를 받아서 처리 JSON.stringify
/*
@PostMapping("/ajax/ajax7.do")
public String ajax7(@RequestBody String alldata,
ServletResponse res) {
try {
this.logger.info(alldata); //이거 get으로 못찍음 {}형태니까 jo로 풀기
JSONObject jo = new JSONObject(alldata);
//키 이름을 순차적으로 가져오는 안터페이스 (자바.유틸)
Iterator i = jo.keys(); //Iterator : 키뽑는애
while(i.hasNext()) {
String a = i.next().toString(); //키를 뽑아옴
this.logger.info(jo.getString(a)); //값을 가져옴
this.logger.info(a); //키를 가져옴
}
this.logger.info(jo.keys().toString());
this.logger.info(jo.getString("pd1"));
this.pw = res.getWriter();
this.pw.write("ok");
}catch (Exception e) {
}
return null;
}
*/
//Front-end에서 파라미터 형태로 문자열 기준으로 POST전송시 Backend에서는 DTO로 활성
//각각의 다른키로 POST DTO로 받기 Jquery
@PostMapping("/ajax/ajax7.do")
public String ajax7(api_dto dto,
ServletResponse res) {
//@RequestParam 쓰면 안되는 이유 => 이름이 없으니까
//@RequestBody 쓰면 안되는 이유 => JSON.stringify 미사용
try {
this.logger.info(dto.getPd1());
this.logger.info(dto.getPd2());
this.logger.info(dto.getPd4());
this.pw = res.getWriter();
this.pw.write("ok");
}catch (Exception e) {
}
return null;
}
//formdata post 전송
@PostMapping("/ajax/ajax8.do")
public String ajax8(@RequestParam(value="fdata", defaultValue = "", required = false) String fdata,
ServletResponse res) {
try {
String rdata[] = fdata.split(",");
this.logger.info(rdata[0]);
this.pw = res.getWriter();
this.pw.write("ok");
}catch (Exception e) {
}
return null;
}
}