Everything has an expiration date
[AjaxJquery] 20231228, 20230102 [프로그램 소스] - PostTest01, PostTest01_ok, web.xml, PostTest02Controller, PostTest02, PostTest02OkController, PostTest02_ok 본문
[Ajax & Jquery]/Program source (Ajax & Jquery)
[AjaxJquery] 20231228, 20230102 [프로그램 소스] - PostTest01, PostTest01_ok, web.xml, PostTest02Controller, PostTest02, PostTest02OkController, PostTest02_ok
Jelly-fish 2024. 1. 2. 13:46
AjaxJquery03
`PostTest01.jsp` 에서 클라이언트가 제목(`#title`)과, 내용(`#content`)을 입력한 후
보내기 버튼(`#sendBtn`)을 클릭했을 때
Post 방식으로 `PostTest01_ok.jsp` 페이지로 데이터를 전송한 후,
다시 `PostTest01.jsp`에서 데이터를 받아와서 입력 값을 보이게 하는 실습
(간단히 확인하기 위해 MVC 모델 적용하지 않은 실습)
01
PostTest01.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PostTest01.jsp</title>
<link rel="stylesheet" type="text/css" href="<%=cp %>/css/main.css">
<style type="text/css">
#resultDiv
{
width: 240px;
height: 180px;
border: 2px solid #499bd7;
padding: 4px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#sendBtn").click(function()
{
// 테스트
//alert("확인~!!!");
// ※ 『post()』
// 『$.post(url, data, callBack);』
// - 매개변수로 전달받은 URL 을 사용하여
// 서버에 대한 POST 요청을 전송한다.
// - 매개변수
// ·url : (String) POST 함수로 연결하는 서버 측 URL
// ·data : (Object) 이름과 값의 쌍으로 프로퍼티를 가진 객체.
// 미리 구성 및 인코딩 된 쿼리 스트링.
//
// ·callBack : (Function) 요청이 완료되면 호출되는 함수.
$.post("PostTest01_ok.jsp"
, {title:$("#title").val(), content:$("#content").val()}
, function(data)
{
$("#resultDiv").html(data);
});
});
});
</script>
</head>
<body>
<div>
<h1>jQuery 의 post() 활용 실습</h1>
<hr>
</div>
<div>
제목 <input type="text" id="title" class="txt">
<br>
내용 <input type="text" id="content" class="txt">
<br>
<input type="button" id="sendBtn" value="보내기" class="btn">
</div>
<br><br>
<div id="resultDiv">
test
</div>
</body>
</html>
PostTest01_ok.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
제목 : <b>${param.title }</b>
<br>
내용 : <b>${param.content }</b>
`$("선택자").post(url, data, callBack 함수);` 를 사용하여
클라이언트가 입력한 두 개의 수 `#su1` 과 `#su2` 의 `#oper` 연산자에 대한 연산 결과(`#result`)를
Post 비동기 방식으로 데이터 송수신을 처리하는 실습.
web.xml
ⓐ 클라이언트가 `http://localhost:3306/AjaxJquery03/posttest02.do` 페이지를 요청했을 때
Controller : PostTest02Controller.java 가 동작하여
View : PostTest02.jsp 로 클라이언트를 접근할 수 있도록 해 준다.
<!-- ⓐ -->
<servlet>
<servlet-name>post02send</servlet-name>
<servlet-class>com.test.ajax.PostTest02Controller</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>post02send</servlet-name>
<url-pattern>/posttest02.do</url-pattern>
</servlet-mapping>
<!-- ⓐ -->
ⓑ 클라이언트가 입력한 `#su1`, `#su2`에 대한 `#oper` 연산자의 연산 결과에 대한 업무 처리를
Controller : PostTest02OkController.java 에서 수행한 후
View : PostTest02_ok.jsp 페이지로 결과를 전송한다.
이후, 최종 결과값 `${result}` 을 PostTest02.jsp 에서 읽어들여서
`<div id="result"></div>` 객체 내부의 텍스트로 삽입한다.
<!-- ⓑ -->
<servlet>
<servlet-name>post02ok</servlet-name>
<servlet-class>com.test.ajax.PostTest02OkController</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>post02ok</servlet-name>
<url-pattern>/posttest02ok.do</url-pattern>
</servlet-mapping>
<!-- ⓑ -->
전체 소스 (web.xml)
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>WebApp00</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>post02send</servlet-name>
<servlet-class>com.test.ajax.PostTest02Controller</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>post02send</servlet-name>
<url-pattern>/posttest02.do</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>post02ok</servlet-name>
<servlet-class>com.test.ajax.PostTest02OkController</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>post02ok</servlet-name>
<url-pattern>/posttest02ok.do</url-pattern>
</servlet-mapping>
</web-app>
PostTest02Controller.java (클라이언트를 최초 요청 페이지 PostTest02.jsp 로 접근할 수 있도록 연결.)
/*=================================
PostTest02Controller.java
===================================*/
package com.test.ajax;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
// Test004.java (Servlet) 에서는
// GenericServlet 을 extends 를 상속하자마자 에러가 났었지만,
// HttpServlet 을 extends 하겠다고 했을 땐, 에러가 나지 않았다.
// ★ 추상 클래스이지만 추상 메소드를 갖고 있지 않은 것이다!!
// [GenericServlet] → service() Overriding
// [HttpServlet] → doGet(), doPost() Overriding
public class PostTest02Controller extends HttpServlet
{
private static final long serialVersionUID = 1L;
// 사용자의 http 프로토콜 요청이 GET 방식일 경우 호출되는 메소드
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
// 사용자의 http 프로토콜 요청이 POST 방식일 경우 호출되는 메소드
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
// 사용자 정의 메소드
protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
// GET 방식이든 POST 방식이든
// 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드
String view = "WEB-INF/view/PostTest02.jsp";
RequestDispatcher dispatcher = request.getRequestDispatcher(view);
dispatcher.forward(request, response);
}
}
PostTest02.jsp (View 페이지)
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PostTest02.jsp</title>
<link rel="stylesheet" type="text/css" href="<%=cp %>/css/main.css">
<style type="text/css">
.txtNum
{
width: 100px;
text-align: right;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
// 버튼 클릭 이벤트
$("#sendButton").click(function()
{
//alert("버튼 클릭 확인");
// post 실행.
$.post("posttest02ok.do"
, {su1:$("#su1").val(), su2:$("#su2").val(), oper:$("#oper").val()}
, function(data)
{
$("#result").html(data);
});
// 『$.post("데이터 전송할 페이지명"), {전송할 속성명:속성값, 전송할 속성명:속성값}, function(data) { } 콜백함수);』
});
});
</script>
</head>
<body>
<div>
<h1>jQuery 의 post() 활용 실습</h1>
<hr>
</div>
<!--
posttest02.do
PostTest02Controller.java
PostTest02.jsp
posttest02ok.do
PostTest02OkController.java
PostTest02_ok.jsp
web.xml
-->
<div>
<input type="text" id="su1" class="txt txtNum">
<select id="oper">
<option value="add">덧셈</option>
<option value="sub">뺄셈</option>
<option value="mul">곱셈</option>
<option value="div">나눗셈</option>
</select>
<input type="text" id="su2" class="txt txtNum">
<input type="button" value=" = " id="sendButton" class="btn">
</div>
<br>
<div id="result">
</div>
<br>
<br>
<div>
<input type="radio" name="rdo">rdo1
<input type="radio" name="rdo">rdo2
</div>
<div>
<input type="checkbox" name="chk">chk1
<input type="checkbox" name="chk">chk2
</div>
<div>
<input type="text">
</div>
</body>
</html>
PostTest02OkController.java (업무 처리 및 최종 연산 결과 전송)
/*======================================
PostTest02OkController.java
========================================*/
package com.test.ajax;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
// Test004.java (Servlet) 에서는
// GenericServlet 을 extends 를 상속하자마자 에러가 났었지만,
// HttpServlet 을 extends 하겠다고 했을 땐, 에러가 나지 않았다.
// ★ 추상 클래스이지만 추상 메소드를 갖고 있지 않은 것이다!!
// [GenericServlet] → service() Overriding
// [HttpServlet] → doGet(), doPost() Overriding
public class PostTest02OkController extends HttpServlet
{
private static final long serialVersionUID = 1L;
// 사용자의 http 프로토콜 요청이 GET 방식일 경우 호출되는 메소드
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
// 사용자의 http 프로토콜 요청이 POST 방식일 경우 호출되는 메소드
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
// 사용자 정의 메소드
protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
// GET 방식이든 POST 방식이든
// 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드
// 이전 페이지(PostTest02.jsp)로부터 넘어온 데이터 수신
// → su1, su2, oper
int su1 = Integer.parseInt(request.getParameter("su1"));
int su2 = Integer.parseInt(request.getParameter("su2"));
String oper = request.getParameter("oper");
String result = "";
if (oper.equals("add"))
{
result = String.format("%d + %d = %d", su1, su2, (su1+su1));
}
if (oper.equals("sub"))
{
result = String.format("%d - %d = %d", su1, su2, (su1-su1));
}
if (oper.equals("mul"))
{
result = String.format("%d * %d = %d", su1, su2, (su1*su1));
}
if (oper.equals("div"))
{
result = String.format("%d / %d = %.2f", su1, su2, ((double)su1/su1));
}
request.setAttribute("result", result);
String view = "WEB-INF/view/PostTest02_ok.jsp";
RequestDispatcher dispatcher = request.getRequestDispatcher(view);
dispatcher.forward(request, response);
}
}
PostTest02_ok.jsp (최종 연산 결과 수신 및, PostTest02.jsp에서 요청한 데이터 조각을 이 페이지에서 가져감.)
<%@ page contentType="text/html; charset=UTF-8"%>
${result}
'[Ajax & Jquery] > Program source (Ajax & Jquery)' 카테고리의 다른 글
'[Ajax & Jquery]/Program source (Ajax & Jquery)' Related Articles
more
