post통신은 method을 post로 적용 및 headers에 application~으로 작성
(배열이 아닐 경우 ?를 이용하여 GET과 비슷한 형태로 전송)
가상의 변수를 이용하여 Backend가 받는 파라미터 이름을 이용하여 body 속성에 값을 적용하여 보내는 방식도 있음
단,배열값 전송시에 body : {} 필수임
⚡ 아이디 중복확인
- ecma_9.jsp
<body> <form id="frm"> 아이디 : <input type="text" name="mid" id="mid"> <input type="button" value="중복체크" id="btn"> </form> </body> <script type="module"> import {logins} from "./ecma_9.js"; document.querySelector("#btn").addEventListener("click",function(){ if(frm.mid.value == ""){ alert("아이디를 입력해주세요") }else{ new logins().ajax_idck(frm.mid.value); } }); </script>
- ecma_9.jsexport class logins { ajax_idck(id){ this.mid = id; fetch("./ecma9ok.do",{ method : "POST", headers : {"content-type":"application/x-www-form-urlencoded"}, body : this.mid //body : {"mid":id} //배열일때는 이렇게 }) .then(function(aa){ return aa.text(); //결과값 }).then(function(bb){ console.log(bb); }).catch(function(error){ console.log("통신오류 발생!") }); } }
fetch
ecma 부터 XMLHttpRequest => fetch로 변환함 (vue에도 있음)
첫번째 then
서버에서 응답받은 값을 처리하는 역할
두번째 then
서버에서 받은 값을 출력하는 역할
catch
예외처리 (오류발생시 출력)
에러남;; ㅋ /ecma/ 경로 다시 확인
👀 CORS
@PostMapping("/ecma/ecma9ok.do")
public String ecma9ok(@RequestParam String mid, HttpServletResponse res) throws Exception{
//CORS - 백엔드가 해줘야함
res.addHeader("Access-Control-Allow-Origin", "*");
res.addHeader("Access-Control-Allow-Credientials", "true");
System.out.println(mid);
this.pw = res.getWriter();
this.pw.write("넹");
return null;
}=> 이건 ajax에서만 통함 , window에서는 X
'CLASS > AJAX' 카테고리의 다른 글
| #5-1 / Jquery Ajax & API 서버통신 (JSON) / JSONArray,JSONObject 사용 (0) | 2024.07.19 |
|---|---|
| #4-3 / Ecma + 배열로 Ajax(fetch)로 전송 (0) | 2024.07.17 |
| #4-1 / ECMA + Ajax (GET통신) - 아이디 중복확인 (0) | 2024.07.17 |
| #3-1 / ajax + .do (0) | 2024.07.02 |
| #2-1 / id 중복체크 연습용(ajax) - POST (0) | 2024.06.24 |