CLASS/AJAX

#4-1 / ECMA + Ajax (GET통신) - 아이디 중복확인

hingu 2024. 7. 17. 11:36
⚡ 아이디 중복확인

- @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.js

export 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