본문 바로가기

JavaScript/jQuery

제이쿼리 , JSP 간 연동1

이클립스 dynamic web project로 아파치 서버와 연결된 상태이며

form을 통해 jsp에 값을 전해준다. 

 

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>

<body>

    <h3>JQuery</h3>

    <form>
        이름:<input type="text" id="name"><br> 나이:
        <input type="text" id="age"><br> 주소:
        <input type="text" id="address"><br>
        <button type="button" id="btn">전송</button>
    </form>

    <script type="text/javascript">
        $(function() {
            //	$("#btn").click(function () {		
            //	});

            $("#btn").on("click", function() {
                // 검사		
                //	alert("click");
                location.href = "NewFile1.jsp?name=" + $("#name").val() +
                    "&age=" + $("#age").val() + "&address=" + $("#address").val();
            });
        });
    </script>

    <br><br><br>

    <form id="frm" action="NewFile1.jsp">
        이름:<input type="text" id="_name" name="name"><br> 나이:
        <input type="text" id="_age" name="age"><br> 주소:
        <input type="text" id="_address" name="address"><br>
        <button type="button" id="_btn">전송</button>
        <!-- <input type="submit" value="전송"> -->
    </form>

    <script type="text/javascript">
        $(function() {
            $("#_btn").click(function() {
                //$("#frm").attr("action", "NewFile1.jsp").submit()
                $("#frm").submit();
            });

        });
    </script>

</body>

</html>

 

NewFile.jsp

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<%
String name = request.getParameter("name");
String sage = request.getParameter("age");
String address = request.getParameter("address");

int age = Integer.parseInt(sage);

out.println("이름:" + name + "<br>");
out.println("나이:" + age + "<br>");
out.println("주소:" + address + "<br>");


%>

</body>
</html>





 

Newfile1.jsp?name=?&age=?&address=? 로 받아온것을 알 수 있다.

'JavaScript > jQuery' 카테고리의 다른 글

제이쿼리, jsp간 연동해보기2  (0) 2020.01.13
제이쿼리 기본 태그 조작법  (0) 2020.01.13
제이쿼리 filter, blur, hide, show, toggle  (0) 2020.01.13
제이쿼리 테이블에 값 넣기  (0) 2020.01.13
제이쿼리 기초 2  (0) 2020.01.10