오봉이와 함께하는 개발 블로그

Servlet - DOM 객체, name 속성, jQuery 사용 본문

BE/Servlet

Servlet - DOM 객체, name 속성, jQuery 사용

오봉봉이 2021. 12. 28. 14:03
728x90

자바스크립트로 서블릿에 요청

DOM 사용 예제 - login.html, LoginServlet3.java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /* DOM 사용 */
        window.onload = function() {
            document.getElementById('frmLogin').onsubmit = function() {

                var id = document.getElementById('user_id');
                var pw = document.getElementById('user_pw');

                if(id.value == "" || pw.value == ""){
                    alert("아이디와 비밀번호는 필수입니다.");
                }else {
                    frmLogin.method = "post";
                    frmLogin.action = "login3";
                    frmLogin.submit();
                }

            };     // onsubmit 끝
        };  // window.onload 끝
    </script>
</head>
<body>
<form id = "frmLogin" name = "frmLogin">
    아이디  : <input type="text" name="user_id" id="user_id"><br>
    비밀번호: <input type="password" name="user_pw" id="user_pw"><br>
    <input type="submit" value="로그인">  <input type="reset" value="다시입력">
</form>
</body>
</html>
package com.example.servlet4;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/login3")
public class LoginServlet3 extends HttpServlet {
        private static final long serialVersionUID = 1L;

        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doProcess(request, response);
        }

        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doProcess(request, response);
        }

        protected void doProcess(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            // 클라이언트 요청 처리
            // 클라이언트 -> 서버 인코딩
            request.setCharacterEncoding("utf-8");

            String id =  request.getParameter("user_id");
            String pw =  request.getParameter("user_pw");
            System.out.println("아이디 : " + id);
            System.out.println("비밀번호 : " + pw);
            // 응답처리
            // 서버 - > 클라이언트로 setContentType
            response.setContentType("text/html;charset=utf-8");

            // 서버에서 클라이언트로 데이터 전송에 자바 IO스트림 이용
            PrintWriter out = response.getWriter();
            // HTML 문서 형식으로 데이터 전송
            out.println("<html><head></head><body>");
            out.println("아이디 :" + id + "<br>" +  "비밀번호 : " + pw);
            out.println("</body></html>");
        }
    }

name 속성 사용 예제 - login4.html, LoginServlet4.java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fn_validate() {
            var frmLogin = document.frmLogin;
            var id = frmLogin.user_id.value;
            var pw = frmLogin.user_pw.value;

            if(id.value == "" || pw.value == ""){
                alert("아이디와 비밀번호는 필수입니다. 4");
                return false;
            }else {
                frmLogin.method = "post";
                frmLogin.action = "login4";
                frmLogin.submit();
            }
        }
    </script>
</head>
<body>
<form id = "frmLogin" name = "frmLogin">
    아이디  : <input type="text" name="user_id"><br>
    비밀번호: <input type="password" name="user_pw"><br>
    <input type="button" value="로그인" onclick="fn_validate()">  <input type="reset" value="다시입력">
</form>
</body>
</html>
package com.example.servlet4;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/login4")
public class LoginServlet5 extends HttpServlet {
        private static final long serialVersionUID = 1L;

        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doProcess(request, response);
        }

        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doProcess(request, response);
        }

        protected void doProcess(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            // 클라이언트 요청 처리
            // 클라이언트 -> 서버 인코딩
            request.setCharacterEncoding("utf-8");

            String id =  request.getParameter("user_id");
            String pw =  request.getParameter("user_pw");
            System.out.println("아이디 : " + id);
            System.out.println("비밀번호 : " + pw);
            // 응답처리
            // 서버 - > 클라이언트로 setContentType
            response.setContentType("text/html;charset=utf-8");

            // 서버에서 클라이언트로 데이터 전송에 자바 IO스트림 이용
            PrintWriter out = response.getWriter();
            // HTML 문서 형식으로 데이터 전송
            out.println("<html><head></head><body>");
            out.println("아이디 :" + id + "<br>" +  "비밀번호 : " + pw);
            out.println("</body></html>");
        }
    }

jQuery 사용 - login5.html, LoginServlet5.java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#login').on('click', function () {
                var id = $('#user_id').val();
                var pw = $('#user_pw').val();
                if(id == "" || pw == ""){
                    alert("아이디와 비밀번호는 필수입니다. 5");
                    return false;
                }else {
                    // $('#frmLogin').attr('method', 'post').attr('action', 'login5').submit();
                    $('#frmLogin').attr({
                        method:'post',
                        action:'login5'
                    }).submit();
                }
            })
        })
    </script>
</head>
<body>
<form id = "frmLogin" name = "frmLogin">
    아이디  : <input type="text" name="user_id" id="user_id"><br>
    비밀번호: <input type="password" name="user_pw" id="user_pw"><br>
    <input type="button" value="로그인" id="login">  <input type="reset" value="다시입력">
</form>
</body>
</html>
package com.example.servlet4;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/login5")
public class LoginServlet5 extends HttpServlet {
        private static final long serialVersionUID = 1L;

        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doProcess(request, response);
        }

        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doProcess(request, response);
        }

        protected void doProcess(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            // 클라이언트 요청 처리
            // 클라이언트 -> 서버 인코딩
            request.setCharacterEncoding("utf-8");

            String id =  request.getParameter("user_id");
            String pw =  request.getParameter("user_pw");
            System.out.println("아이디 : " + id);
            System.out.println("비밀번호 : " + pw);
            // 응답처리
            // 서버 - > 클라이언트로 setContentType
            response.setContentType("text/html;charset=utf-8");

            // 서버에서 클라이언트로 데이터 전송에 자바 IO스트림 이용
            PrintWriter out = response.getWriter();
            // HTML 문서 형식으로 데이터 전송
            out.println("<html><head></head><body>");
            out.println("아이디 :" + id + "<br>" +  "비밀번호 : " + pw);
            out.println("</body></html>");
        }
    }
728x90
저작자표시

'BE > Servlet' 카테고리의 다른 글

Servlet - 포워딩  (0) 2021.12.29
Servlet - Servlet DB연동(Connection Pool)  (0) 2021.12.28
Servlet - Servlet DB 연동(기본 JDBC)  (0) 2021.12.28
Servlet - Servlet 요청 API  (0) 2021.12.27
Servlet - Servlet 개요  (0) 2021.12.27
'BE/Servlet' Related Articles more
Comments