Notice
Recent Posts
Recent Comments
Link
Everything has an expiration date
[AjaxJquery] 20240101 [처음부터 재작성 복습] - LoadTest01, LoadTest02, web.xml, Test03Send, LoadTest03(jsp), LoadTest03(java), LoadTest03_ok 본문
[Ajax & Jquery]/Program source (Ajax & Jquery)
[AjaxJquery] 20240101 [처음부터 재작성 복습] - LoadTest01, LoadTest02, web.xml, Test03Send, LoadTest03(jsp), LoadTest03(java), LoadTest03_ok
Jelly-fish 2024. 1. 4. 01:04
AjaxJquery01
012
Ⅰ. `$("선택자").load("로드를 원하는 html 문서의 위치와 이름")` 을 통한 실습 예시
$("선택자").load("로드를 원하는 html 문서의 위치와 이름")
→ jQuery 의 기능이 수행되는 과정에서 다른 html 문서를 로드한다.
→ 대상 페이지의 HTML 을 읽어들여서 `$("선택자")` 에 삽입한다.
→ ※ 이때, `$("선택자").load()`는 비동기 방식이므로 `alert()` 경고창이 load 이전에 표시되는 것을 확인할 수 있다.
LoadTest01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LoadTest01.html</title>
<style type="text/css">
@font-face {
font-family: 'YEONGJUPunggiGinsengTTF';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2310@1.0/YEONGJUPunggiGinsengTTF.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
#btn
{
font-family: 'YEONGJUPunggiGinsengTTF';
color: #146155;
background-color: #7dffcf;
width: 20%;
padding: 10pt;
border-radius: 10pt;
text-align: center;
}
#btn:active
{
color: #ff8cad;
}
#btn:hover
{
background-color: #fffdbf;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
// ※ 『load()』
// 『$(선택자).load("로드를 원하는 html 문서의 위치와 이름");』
// - jQuery 의 기능이 수행되는 과정에서 다른 html 문서를 로드
// - HTML 을 읽어들여서 DOM 에 삽입하는 기능을 수행
// [기본적인 jQuery 함수. → 사용자가 아무런 이벤트를 발생시키지 않아도 자동 동작]
$(document).ready(function()
{
// [id="btn"인 객체의 class="btnLoad"인 자식 객체]
// → 이 객체가 클릭되었을 때 다음을 동작한다...
$("#btn .btnLoad").click(function(){
//alert("확인~!!!");
$("#ctlGrid").load("LoadTest02.html");
//-- 『비동기』 방식으로 페이지 로드
window.alert("여기서 작성한 페이지가 출력되는 시점 확인");
});
});
</script>
</head>
<body>
<div>
<h1>jQuery 의 load() 활용 실습</h1>
<hr>
</div>
<div>
<div>
<div id="btn">
<div class="btnLoad">HTML 읽어오기 버튼</div>
</div>
</div>
<div id="ctlGrid">
</div>
</div>
</body>
</html>
LoadTest02.html (LoadTest01.html 의 `#ctlGrid` 객체의 내부에 load 될 페이지)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LoadTest02.html</title>
</head>
<body>
load()에 대한 실습
</body>
</html>
012
Ⅱ. `$("선택자").load("로드를 원하는 html 문서의 위치와 이름")` 을 이용한 두 수의 연산 페이지 구현
web.xml
ⓐ 클라이언트가 `http://localhost:3306/AjaxJquery01/loadtest03send.do` 로 페이지를 요청했을 때
View : LoadTest03.jsp 에 접근
<!-- ⓐ 클라이언트 최초 요청 페이지(LoadTest03.jsp) 접근 --> <servlet> <servlet-name>testsend03</servlet-name> <servlet-class>com.test.ajax.Test03Send</servlet-class> </servlet> <servlet-mapping> <servlet-name>testsend03</servlet-name> <url-pattern>/loadtest03send.do</url-pattern> </servlet-mapping>
ⓑ 클라이언트가 `su1`, `su2`와 `oper` 연산자를 선택한 후, ` = ` 버튼을 클릭하면 `http://localhost:3306/AjaxJquery01/loadtest03.do`로 페이지를 요청.
Controller : LoadTest03.java 에서 업무 처리 및 결과 전송(forwarding) 수행.
<!-- ⓑ 업무 처리 및 결과 수신 페이지 이동 --> <servlet> <servlet-name>loadtest03</servlet-name> <servlet-class>com.test.ajax.LoadTest03</servlet-class> </servlet> <servlet-mapping> <servlet-name>loadtest03</servlet-name> <url-pattern>/loadtest03.do</url-pattern> </servlet-mapping>
<?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" version="3.1">
<display-name>AjaxJquery01</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>
<!-- 클라이언트 최초 요청 페이지(LoadTest03.jsp) 접근 -->
<servlet>
<servlet-name>testsend03</servlet-name>
<servlet-class>com.test.ajax.Test03Send</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>testsend03</servlet-name>
<url-pattern>/loadtest03send.do</url-pattern>
</servlet-mapping>
<!-- 업무 처리 및 결과 수신 페이지 이동 -->
<servlet>
<servlet-name>loadtest03</servlet-name>
<servlet-class>com.test.ajax.LoadTest03</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>loadtest03</servlet-name>
<url-pattern>/loadtest03.do</url-pattern>
</servlet-mapping>
</web-app>
Test03Send.java (클라이언트 View 페이지(LoadTest03.jsp) 접근 컨트롤러)
/*=========================
ServletSample.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;
public class Test03Send extends HttpServlet
{
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
@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/LoadTest03.jsp";
RequestDispatcher dispatcher = request.getRequestDispatcher(view);
dispatcher.forward(request, response);
}
}
LoadTest03.jsp (View)
<%@ page contentType="text/html; charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LoadTest03.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">
$(document).ready(function() {
$("#sendButton").on("click", function() {
//alert("클릭했네요~!!!");
var su1 = $("#su1").val();
var su2 = $("#su2").val();
var oper = $("#oper").val();
// ※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
//===============================================================
// ERROR : oper 문자열을 받아 올 때
// 선택자에 『#』 을 빼먹어서...
// $("oper") 형태로 입력하자 <oper>와 같은 태그는 존재하지 않으므로
// 연산자 value 값이 넘어가지 않아서 아무런 에러 없이 결과가 출력되지 않았다.
// 정신체리.
//===============================================================
// ※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
$("#result").load("loadtest03.do?su1=" + su1 + "&su2=" + su2 + "&oper=" + oper);
});
});
</script>
</head>
<body>
<div>
<h1>jQuery 의 load() 활용 실습2: 두 수의 연산</h1>
<hr>
</div>
<div>
<div>
<input type="text" id="su1" class="txt txtNum">
<select name="" 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" style="min-width: 40px">
</div>
loadtest03send.do → Test03Send.java → LoadTest03.jsp
↓
loadtest03.do → LoadTest03java → LoadTest03_ok.jsp
<div id="result">
</div>
<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>
</div>
</body>
</html>
LoadTest03.java (업무 처리 및 결과값 forwarding 처리 컨트롤러)
/*=========================
LoadTest03.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;
public class LoadTest03 extends HttpServlet
{
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
@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 방식이든
// 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드.
//===========================================================
// 이전 페이지(LoadTest03.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 = "";
System.out.println("LoadTest03.java 동작함.");
//===========================================================
// 업무 처리 (su1과 su2에 대한 연산을 oper의 value 값에 따라 분기하기)
//===========================================================
if (oper.equals("add"))
{
result = String.format("%d + %d = %d", su1, su2, (su1+su2));
}
else if (oper.equals("sub"))
{
result = String.format("%d - %d = %d", su1, su2, (su1-su2));
}
else if (oper.equals("mul"))
{
result = String.format("%d * %d = %d", su1, su2, (su1*su2));
}
else if (oper.equals("div"))
{
result = String.format("%d / %d = %.2f", su1, su2, ((double)su1 / su2));
}
// 연산 결과를 저장한 result 를 세션에 저장.
request.setAttribute("result", result);
System.out.println(result);
// RequestDispatcher 를 이용해, 결과 수신 페이지(
String view = "WEB-INF/view/LoadTest03_ok.jsp";
RequestDispatcher dispatcher = request.getRequestDispatcher(view);
dispatcher.forward(request, response);
}
}LoadTest03_ok.jsp (최종 결과 수신, 여기서의 `${result}`를 LoadTest03.jsp에서 로드하여 `#result`에 삽입.
<%@ page contentType="text/html; charset=UTF-8"%>
${result}
'[Ajax & Jquery] > Program source (Ajax & Jquery)' 카테고리의 다른 글
'[Ajax & Jquery]/Program source (Ajax & Jquery)' Related Articles
more
