⚡ 아이디 중복확인
- @Controller
//ecma Ajax (GET통신) @GetMapping("/ecma/ecma8ok.do") public String ecma8ok(@RequestParam String mid, HttpServletResponse res) throws Exception{ this.pw = res.getWriter(); if(mid==null) { this.pw.print("error"); }else { Connection con = dbInfo.getConnection(); String sql = "select count(*) as ctn from login where mid=?"; PreparedStatement ps = con.prepareStatement(sql); ps.setString(1, mid); ResultSet rs = ps.executeQuery(); rs.next(); if(Integer.parseInt(rs.getString("ctn")) > 0) { pw.write("no"); }else { pw.write("ok"); } rs.close(); ps.close(); } this.pw.close(); return null; }
- ecma_8.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_8.js"; document.querySelector("#btn").addEventListener("click",function(){ if(frm.mid.value == ""){ alert("아이디를 입력해주세요") }else{ new logins().ajax_idck(frm.mid.value); } }); </script>
- ecma_8.jsexport class logins { //ajax를 사용하는 메소드(get통신) ajax_idck(id){ this.mid = id; fetch("./ecma8ok.do?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
예외처리 (오류발생시 출력)
👀 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' 카테고리의 다른 글
| #4-3 / Ecma + 배열로 Ajax(fetch)로 전송 (0) | 2024.07.17 |
|---|---|
| #4-2 / ECMA + Ajax (POST통신) (0) | 2024.07.17 |
| #3-1 / ajax + .do (0) | 2024.07.02 |
| #2-1 / id 중복체크 연습용(ajax) - POST (0) | 2024.06.24 |
| #1-4 / js, jquery - 외부 data load (CORS 해결) (0) | 2024.06.20 |