JAVA

[ajax] 비동기 form 사용하기

docc 2021. 8. 16. 22:24

ajax와 form

ajax 는 비동기가 기본값이지만

form 은 기본값이 동기(submit)이기 때문에

 

form 의 onsubmit 에 ajax 함수를 적용하고 싶을 때

1. 마지막에 return false 를 선언해준다.

 

그럼 submit 동기처리는 비활성화 되며 ajax 비동기처리만 가능하게 할 수 있다.

 

만약 ajax의 결과에 따라 동기식으로 처리해야 한다면

 

2. location.href 로 요청명을 기입해주면 된다.

 

아래 예시

 

<script type="text/javascript">
	function check(){
		if(document.loginForm.id.value==''){
			alert('ID를 입력하세요')
			document.loginForm.id.focus();
			return false;
		}
		
		if(document.loginForm.pw.value==''){
			alert('비밀번호를 입력하세요')
			document.loginForm.pw.focus();
			return false;
		}
        var form_data = "id="+$('#id').val()+"&pw="+$('#pw').val()
		
		//Ajax
		$.ajax({
			type:"POST",
			url:"loginCheck",
			data: form_data,//서버로 넘길 인수값
			dataType: "JSON",
			success:function(data){
				if(data.check==1){
					alert('로그인 되었습니다.');
					location.href="boardList"//로그인 성공시 동기처리를 위해 location.href
				}else if(data.check==-1){
					//사용중인 ID
					alert('가입하지 않은 아이디이거나, 잘못된 비밀번호입니다.');
				}
			},//success-end
			error:function(){
				alert('연결이 원활하지 않습니다.');
			}
		});
        
		return false;//기본적으로 false를 선언해 동기처리 막기
	}
	
</script>

</head>
<body>
	<h2>로그인</h2>
	
	<form name="loginForm" method="post" onsubmit="return check()">
		<table border="1">
			<tr>
				<td>ID</td>
				<td><input type="text" name="id" id="id" size="20"></td>
			</tr>
		
			<tr>
				<td>비밀번호</td>
				<td><input type="password" name="pw" id="pw" size="20"></td>
			</tr>
			
			<tr>
				<td colspan="2" align="center">
					<input type="submit" value="로그인">&nbsp;
					<input type="button" value="회원가입" onclick="location.href='joinForm'">
				</td>
			</tr>
		
		</table>
	
	</form>
	
</body>