- 아이디 중복체크실습
[흐름]
1.아이디를 입력한다.
2.버튼 클릭 시, IdDataBase로 전송한다.
3.”smhrd”와 비교한 후, 다음과 같은 결과를 응답한다.
- 일치한 경우 1 반환
- 일치하지 않는 경우 0 반환
4.idCheck.html에서는 서버로부터 받은 응답결과에 따라 출력한다.
▶ idCheck.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<input type = text id="input_id">
<button>아이디체크</button>
<p></p>
<script type="text/javascript">
//버튼 클릭시 ajax 이용해서 서버에 접근
$("button").on("click",function(){
// input_id라는 곳에 적은 값 가져오는 기존 방법
// let inputData = document.getElementById("input_id").value
// jQuery로 input에 적은 값 가져오는 방법 -> val()
let inputData = $("#input_id").val();
// ajax 통신
$.ajax({
url : "idDataBase",
// 통신을 할때 서버로 전달할 데이터
// key, value 값으로 보내기
data : "id="+inputData, // {"id":inputData} 제이슨 방식
success : function(result){
alert("통신 성공")
console.log(inputData)
console.log(result)
// result에 담긴 값에 따라 p태그를 통해 사용가능한 id인지 아닌지 알려줌
// result : idDataBase.java에서 reponse한 결과
if(result==1){
$("p").text("이미사용중")
}else{
$("p").text("사용가능")
}
},
error : function(){
alert("통신 실패")
}
})
})
</script>
</body>
</html>▶ IdDataBase.java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/idDataBase")
public class idDataBase extends HttpServlet {
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 서버 데이터베이스 역할
System.out.println("왔다!");
String input_id = request.getParameter("id");
System.out.println("입력한 아이디는 : " +input_id);
int cnt =0;
// 아이디 있다면 1, 없다면 0
// 데이터 베이스에 smhrd 라는 아이디만 존재한다고 가정
if(input_id.equals("smhrd")) {
cnt=1;
}
PrintWriter out = response.getWriter();
out.print(cnt); // 출력이 아니라 html 파일로 데이터 다시 전송
// html에 넘어가면 result라는 변수에 담기게됨
}
}실행 화면
'웹 개발 언어 > JavaScript' 카테고리의 다른 글
| js 두번 실행 (0) | 2022.10.14 |
|---|---|
| Gson 라이브러리 (0) | 2022.04.03 |
| 영화진흥위원회 Open API를 이용한 JSON 실습 (0) | 2022.04.03 |
| Ajax와 JSON (0) | 2022.04.03 |
| jQuery 이용해서 이미지 움직이기! (0) | 2022.03.31 |
댓글