// script 방식 :
onload = () => {
document.querySelector('#btn-auth').onclick = () => {
// (POST) / mail
// {email:{인증코드를 받을 이메일주소}}
// 비동기 통신 => ajax
$.ajax({
url: 'mail', // 요청 방식(type:method)
type :'post', //요청 주소(url)
data: { // 요청 시 전달 데이터(파라미터) (data)
email: $("#email").val()
},
success:(result) =>{
alert(result);
},
error:(err) =>{
console.log(err);
}
});
}
// [확인] 버튼 클릭 이벤트 -> 알림창 표시 : "확인"
// 제이쿼리 방식 click은 함수이다.
$('#btn-check').click(()=>{
alert('확인요청');
});
}
document.querySelector('#btn-auth').onclick = () => {}
해당 방식은 특정 요소에 클릭 이벤트를 직접 할당하는 방법이다
이렇게 한다면 버튼이 클릭될 때마다 지정된 함수가 실행된다.
// 제이쿼리 방식 click은 함수이다.
$('#btn-check').click(()=>{
alert('확인요청');
});
}
* onload : 이벤트는 웹 페이지나 특정 리소스가 완전히 로드된 후에 실행되는 이벤트이다.
주요 특징으로는
페이지 로딩 완료 : 모든 요소(HTML, CSS 이미지 등)가 완전히 로드된 후에 호출이 된다.
초기화 작업 : 자바스크립트를 사용해 초기화 작업을 수행하기에 적합하다고 한다.
url : 요청을 보낼 서버의 주소이다 mail이라는 경로로 POST를 요청하게 된다.
type : 요청하는 방식이다. 일반적으로 GET 또는 POST 방식이 사용된다.
요청 방식을 설정하지 않을 시에는 기본적으로 get 방식으로 요청을 하게된다.
type :'post',
data: 서버로 전송할 데이터이다.
객체 형태로 작성되며, input과 select는 val()로 값을 가져오게 된다.
success:
- 요청이 성공적으로 완료되었을 때 실행되는 콜백 함수입니다. 서버에서 응답받은 데이터를 매개변수로 받아와 처리할 수 있습니다. 위 예제에서는 성공 시 alert(result)로 결과를 알립니다.
error:
- 요청이 실패했을 때 실행되는 콜백 함수입니다. 오류 정보를 err 매개변수로 받아와 콘솔에 출력할 수 있습니다.