반응형
Notice
Recent Posts
Recent Comments
Link
불로구
(Servlet) - 자바스크립트로 서블릿 요청 본문
반응형
자바스크립트로 서블릿 요청
- 웹 사이트에 로그인할 때 정보를 입력하지 않으면 경고 메시지 같은 것들이 출력된다.
- 데이터의 유효성 체크를 하기 위해 자바 스크립트로 구현하는 방법을 알아보자
- HTML -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function fn_validate(){
let frmLogin = document.frmLogin;
let user_id = frmLogin.user_id.value;
let user_pw = frmLogin.user_pw.value;
if((user_id.length == 0 || user_id == "")
|| (user_pw.length == 0 || user_pw == "")){
alert("아이디와 비밀번호를 입력해주세요");
}else{
frmLogin.method = "get";
frmLogin.method = "loginJS";
frmLogin.submit();
}
}
</script>
</head>
<body>
<h2>자바스크립트로 서블릿 요청</h2>
<hr>
<form name="frmLogin" method="get" action="loginJS" encType="UTF-8">
아이디 : <input type="text" name="user_id"><br>
비밀번호 : <input type="password" name="user_pw"><br>
<input type="submit" onClick="fn_validate()" value="로그인">
</form>
</body>
</html>- <form> 태그의 name 속성으로 <form> 태그 객체를 받아온다
- <form> 태그 내 <input> 태그의 name 속성으로 입력한 ID, PW를 받아온다
- <form> 태그의 전송 방식을 get, action 을 loginJS로 설정하고 자바스크립트에서 서블릿으로 전송한다.
- Servlet -
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletConfig;
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("/loginJS")
public class LoginJS extends HttpServlet {
private static final long serialVersionUID = 1L;
public void init(ServletConfig config) throws ServletException {
System.out.println("init 호출");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
PrintWriter out = response.getWriter();
String id = request.getParameter("user_id");
String pw = request.getParameter("user_pw");
System.out.println("아이디 : " + id);
System.out.println("비밀번호 : " + pw);
String data = "<html>";
data += "<body>";
data += "아이디 : " + id;
data += "<br>";
data += "비밀번호 : " + pw;
data += "</body>";
data += "</html>";
out.print(data);
}
}
서블릿 코드를 작성하고
로그인 버튼을 눌리면.....
이렇게 서비스가 정상적으로 처리된다.
만약 데이터를 입력하지 않고 로그인을 눌린다면?
이렇게 자바스크립트에 의해 경고문이 나오게 된다!
반응형
'프로그래밍 > WEB' 카테고리의 다른 글
| SpringFramework - JNDI (0) | 2021.04.06 |
|---|---|
| JSP & SpringFramework - 커넥션풀 동작 과정 (0) | 2021.04.02 |
| (Servlet) 서블릿 DB 연동하기 (1) (0) | 2021.03.15 |
| (Servlet) 서블릿 GET, POST 동시 요청 (0) | 2021.03.15 |
| (Servlet) 서블릿 여러 개의 값 전송 (0) | 2021.03.14 |
'프로그래밍/WEB' Related Articles
more
Comments