본문 바로가기
CLASS/AJAX

#4-3 / Ecma + 배열로 Ajax(fetch)로 전송

by hingu 2024. 7. 17.

혼돈.. 방법이 굉장히 상당히 많다/... 

⚡ ModelATtribute(dao) or RequestParam 으로 받을 경우

- ecma_11.jsp
 
@PostMapping("/ecma/ecma11ok.do")
public String ecmall(
            @RequestParam String mid,
            HttpServletResponse res, 
            HttpServletRequest req
        ) throws Exception {
//public String ecmall(@ModelAttribute data_dao dao,HttpServletResponse res, HttpServletRequest req) throws Exception{
//public String ecmall(@requestBody Map<String,Object> maps,HttpServletResponse res, HttpServletRequest req) throws Exception{
    this.pw = res.getWriter();
    System.out.println(mid);
    //System.out.println(dao.getMname());

    this.pw.print("ok");
    this.pw.close();
    return null;
}


- ecma_11.jsp

<body>
	<input type="button" value="전송" id="btn">
</body>

<script type="module">
	import {ecma_ajax} from "./ecma_11.js";
	document.querySelector("#btn").addEventListener("click",function(){
		//new ecma_ajax().ajax_arr();
		new ecma_ajax().arrs();
	});
	
</script>



- ecma_11.js

export class ecma_ajax{
	//배열값을 전송하는 방식
	ajax_arr(){
		fetch("./ecma11ok.do",{
			method : "POST",

			//headers : {"content-type":"application/json"},
			//body : JSON.stringify({"mid":"hong","mname":"홍길동"})

			//ModelATtribute(dao) or RequestParam 으로 받을 경우 아래 요 headers,body
			headers : {"content-type":"application/x-www-form-urlencoded"},
			//body : "mid=hong&mname=홍길동" //이렇게 하면 dao로 잘 받아짐

			body : new URLSearchParams({ //배열객체를 변수형 객체로 구분하여 전송함
				mid : "hong",
				mname : "홍길동"
			})
		}).then(function(aa){
			return aa.text();
		}).then(function(bb){
			console.log(bb);
		}).catch(function(error){
			console.log("에러발생");
		});
	}
	
	//formdata를 이용하여 배열 생성
	arrs(){
		this.fm = new FormData(); //key가 있는 배열 생성
		this.fm.append("mid","hong");
		this.fm.append("mname","홍길동");
		console.log(this.fm.get("mid"));
		console.log(this.fm.get("mname"));
	}
}


- data_dao.java(dao)

package shop;

import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class data_dao {
	String mid,mname; 
}

 

 

@Requestparam

자료형

@RequestParam String mid, @RequestParam String mname 으로 받으면 (hong, 홍길동 각각 찍힘)

 

@RequestBody 

배열자료형,변수형 - data값을 통째로 받아서 처리

@RequestParam String aa로 받으면 (mid=hong&mname=홍길동) 이렇게 찍힘

 

@ModelAttribute

dto

 

⚡ @RequestBody로 받을 경우 - 배열 형식인 문자열로 변환 후 controller로 보냄

배열처럼 생긴 문자열을 배열로 변환하는 라이브러리를 사용해야 jsp에서 사용 가능 ! 
- maven repository 에서 다운 : 2가지
   JSON.simple 1.1.1 (data를 json으로 변환)   / JSON In Java  20240303  (문자를 json으로 변환)
   =><dependency> pom.xml 에 복붙

- ecma_11.js 
export class ecma_ajax{
	//배열값을 전송하는 방식
	ajax_arr(){
		this.datas = {mid:"hong",mname:"홍길동"};
		fetch("./ecma11ok.do",{
			method : "POST",
			headers : {"content-type":"application/json"},
			body : JSON.stringify(this.datas)

		}).then(function(aa){
			return aa.text();
		}).then(function(bb){
			console.log(bb);
		}).catch(function(error){
			console.log("에러발생");
		});
	}

}
@RequestBody 형태로 Backend처리
프론트에서 넘어오는 배열 [ ],{ } 구분 잘하세욤

JSON.stringify
배열을 문자열로 변경 할 때 사용

- @Controller
 
@PostMapping("/ecma/ecma11ok.do")
public String ecmall(
            @RequestBody String data,
            HttpServletResponse res
        ) throws Exception {
    this.pw = res.getWriter();
    try {
        JSONObject jo = new JSONObject(data); //{}형식으로 오면 해당 라이브러리에서 처리불가
        System.out.println(jo.get("mid"));
        this.pw.print("ok");			
    }catch(Exception e) {
        System.out.println(e);
        this.pw.print("no");
    }

    this.pw.close();
    return null;
}


JSONArray : [ ]형태를 받음
JSONObject : { }형태를 받음

 

👀 CORS

'CLASS > AJAX' 카테고리의 다른 글

#5-2 / Jquery Ajax & API 서버통신 (URL JSON 로드)  (0) 2024.07.19
#5-1 / Jquery Ajax & API 서버통신 (JSON) / JSONArray,JSONObject 사용  (0) 2024.07.19
#4-2 / ECMA + Ajax (POST통신)  (0) 2024.07.17
#4-1 / ECMA + Ajax (GET통신) - 아이디 중복확인  (0) 2024.07.17
#3-1 / ajax + .do  (0) 2024.07.02

관련글

티스토리툴바