ID 중복 체크(값 유효성 체크) 및 form 태그 이벤트
- Servlet
@WebServlet("/mem")
public class MemberIdCheckServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
PrintWriter writer = response.getWriter();
String id = (String)request.getParameter("id");
MemberDAO memberDAO = new MemberDAO();
boolean overlappendID = memberDAO.overappedID(id);
if(overlappendID == true) {
writer.print("not_usable");
}else {
writer.print("useable");
}
}
}
- jsp
- submit 이벤트에다가 하는 법
<script>
$(function(){
$("#frm").submit(function(e){
e.preventDefault();
//아이디를 입력했는지 여부
if($("#t_id").val()===''){
alert("아이디를 입력해주세요");
$("#t_id").focus();
return;
}
let data = $("#frm").serialize();
$.ajax({
url : 'insert.do',
method : 'post',
data : data,
success : function(res){
//
}
})
//$(this).submit(); 무한반복 : 이벤트발생 -> submit()
})
})
</script>
<body>
<form id="frm" method="post" action="insert.do" >
아이디: <input type="text" id="t_id" name="t_id"> -> name명이 있어야 전송됨
<div id = "message"></div>
비밀번호 : <input type = "password" id="t_pwd" name="t_pwd"><br>
<input type = "submit" value="가입">
</form>
</body>- onsubmit버튼으로 이벤트 주기
//onsubmit버튼으로 이벤트 주기
<script>
function send(){
//아이디를 입력했는지 여부
if($("#t_id").val()===''){
alert("아이디를 입력해주세요");
$("#t_id").focus();
return false;
}
//중복체크
let isCon = true;
$.ajax({
type:"get",
async:false, // 아이디 중복체크가 끝나야 비번 중복체크 실행 (동기적 실행을 위해 false로 줌 )
dataType: "text",
url: 'http://localhost:8090/pro16/mem',
data: {id:$("#t_id").val()}, //id를 서블릿으로 전송
success: function(data, textStatus){
if(data == 'usable'){
$('#message').text("사용할 수 있는 id");
$('#btn_duplicate').prop("disabled",true);
}else{
//$('#message').text("사용할 수 없는 id");
alert('중복된 아이디 입니다.')
$("#t_id").val('');
$("#t_id").focus();
isCon = false; //중복된 아이디면 false 만들기 -> 이이디 중복이면 비번 진행 안되게 하기 위해
return false;
}
}
});
if(!isCon) return false; // false면 밑에 진행 안됨
//비밀번호 체크
if($("#t_pwd").val() === ''){
alert("비밀번호를 입력해주세요");
return false;
}
}
</script>
<body>
<form id="frm" method="post" action="insert.do" onsubmit="return send();">
아이디: <input type="text" id="t_id" name="t_id"> -> name명이 있어야 전송됨
<div id = "message"></div>
비밀번호 : <input type = "password" id="t_pwd" name="t_pwd"><br>
<input type = "submit" value="가입">
</form>
</body>
< 추가 >
ID 중복체크하기 버튼으로 중복체크만 하고 싶은 경우
<script>
function fn_process(){
var _id = $('#t_id').val(); //텍스트 박스에 입력한 id를 가져옴
if(_id == ''){
alert("ID를 입력하세요"); //id 발생하지 않으면 오류 발생
return;
}
$.ajax({
type:"get",
async:ture,
dataType: "text",
url: 'http://localhost:8090/pro16/mem',
data: {id: _id}, //id를 서블릿으로 전송
success: function(data, textStatus){
if(data == 'usable'){
$('#message').text("사용할 수 있는 id");
$('#btn_duplicate').prop("disabled",true);
}else{
$('#message').text("사용할 수 없는 id");
}
}
})
}
</script>
<body>
<form id="frm" method="post" action="insert.do" onsubmit="return send();">
아이디: <input type="text" id="t_id" name="t_id"> -> name명이 있어야 전송됨
<input type="button" id="btn_duplication" value="ID 중복체크하기" onclick="fn_porcess()"><br><br>
</body>[ form의 데이터 전송 하는 방법 ]
- submit (action으로 전송)
- ajax인경우
- data : {name: value, name:value …}
- data : $(폼).serialize();
- ajax전송인데 파일도 전송
- let f = new Form($(폼)[0])
- data : f
KIM