💫 GetTest01
# GetTest01.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>GetTest01.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$ function()
{
$("#loadBtn").click(function()
{
var nickName = $("#nickName").val();
$.get("GetTest01_ok.jsp", {nickName:nickName}, function()
{
$("#result").html(data);
});
});
}
</script>
</head>
<body>
<div>
<h1>jQuery 의 get() 활용 실습</h1>
<hr>
</div>
<div>
<input type="text" id="nickName" class="txt"/>
<br>
<button type="button" id="loadBtn" class="btn">눌러보자</button>
</div>
<br>
<div id="resultDiv">
</div>
</body>
</html>➰체크할 내용➰
[ get() ]
- 『 $.get(url, data, callBack) 』 : 매개변수로 전달받은 URL 을 사용하여 서버에 대한 GET 요청을 전송하도록 한다.
- 『 $.get(url, {속성:값, 속성:값, 속성:값, ....}, callBack) 』 : 전달 과정에서 data 는 JSON 형태로 처리할 수 있다.
→ 『$.get("요청URL", {이름1:값1, 이름2:값2}, function(넘겨받은값){ $(선택자).html(넘겨받은값처리); })
- $.get를 사용하면 XMLHttpRequest 객체를 생성할 필요 없이 AJAX 사용이 가능하다!!
jQuery 가 처리하고, 콜백 함수를 통해 서버 응답을 처리함!
# GetTest01_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();
%>
<%
//String nickName = request.getParameter("nickName");
// 이렇게 받아와도 되고~ 아래처럼 받아와도 되고~
%>
${param.nickName }님 안녕하세요
<br>
반갑습니다.
💫 GetTest02
페이지 요청 경로
gettest02.do → com.test.ajax.GetTest02Controller.java → WEB-INF/view/GetTest02.jsp
→ gettest02ok.do → com.test.ajax.GetTest02OkController.java → WEB-INF/view/GetTest02_ok.js
# web.xml, gettest02.do, GetTest02Controller.java, GetTest02_ok.jsp 코드 생략~
# GetTest02.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>GetTest02.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()
{
var su1 = $("#su1").val();
var su2 = $("#su2").val();
var oper = $("#oper").val();
var url = "gettest02ok.do";
$.get(url, {su1:su1, su2:su2, oper:oper}, function(data)
{
$("#result").html(data);
});
});
});
</script>
</head>
<body>
<div>
<h1>jQuery 의 get() 활용 실습</h1>
<hr>
</div>
<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>
# GetTest02OkController.java
protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
// GET 방식이든 POST 방식이든
// 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드
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+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));
request.setAttribute("result", result);
RequestDispatcher dispatcher = request.getRequestDispatcher("WEB-INF/view/GetTest02_ok.jsp");
dispatcher.forward(request, response);
