[jQuery] Ajax 이용하여 이메일 중복 기능 만들기

 

검색창에 jquery cdn을 검색해서 링크로 접속합니다.

접속 후에 jQuery 3.x - minified를 클릭하면 script가 나옵니다.

 

 

<script
        src="https://code.jquery.com/jquery-3.6.3.min.js"
        integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
        crossorigin="anonymous"></script>

 

 

제이쿼리는 HTML 이벤트 처리 등 다양한 기능을 부여하는 오픈소스 기반의 자바스크립트 라이브러리입니다.

짧고 단순하게 웹페이지의 다양한 효과를 적용할 수 있어 많이 사용됩니다.

 

 

 

 

◎ CDN

라이브러리를 가져와 사용할 때는 로컬에 다운로드하거나 웹의 주소를 입력하며 됩니다.

여기서 웹 주소를 입력하는 것이 CDN입니다.

CDN은 Content Delivery Network의 약자로 웹사이트의 접속자가 콘텐츠를 다운로드할 때 자동으로 가장 가까운 서버에서 다운로드할 수 있도록 하는 기술입니다. CDN을 사용하면 빠르게 제이쿼리를 로드할 수 있습니다.

 

 

 

 

◎ jQuery CDN 사용법

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

위의 코드 중 하나를 html head 태그에 삽입해주면 됩니다.

위에서부터 구글, 마이크로소프트, jqury의 CDN이며, 아무거나 사용하셔도 됩니다.

 

 

 

 

◎ 이메일 중복 기능 만들기

.html 파일에 코드와 스크립트를 넣어주게 되면 아래와 같이 실행되어집니다. 

이메일: <input type="text" name="memberEmail" id="memberEmail" onkeyup="emailCheck()"><br>
// body > form 태그 안에 존재

<script th:inline="javascript">
    const emailCheck = () => {
        const email = document.getElementById("memberEmail").value;
        console.log("입력값: ", email);
    }
</script>

onkeyup이라는 이벤트 요소를 통해 키보드에 입력이 될 때 마다 함수가 호출됩니다.