-
[ajax] 비동기 form 사용하기JAVA 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="로그인"> <input type="button" value="회원가입" onclick="location.href='joinForm'"> </td> </tr> </table> </form> </body>'JAVA' 카테고리의 다른 글
[spring] resultMap 사용하기 (0) 2021.08.17 [spring] ORA-00911: invalid character 오류 (0) 2021.08.17 [spring] spring-boot : MVC 어노테이션(Mapper,Repository,Service,Controller) (0) 2021.08.16 [spring] spring-boot:Spring Starter Project 시작하기 (0) 2021.08.16 [mybatis] xml 속성 정리 (0) 2021.08.15