! 배워가고 있는 주인장이 쓴 글이니 정보의 정확성에 유의하시기 바랍니다 !
AjaxJquery03
※ 『$.post(url, data, callBack)』
- 매개변수로 전달받은 URL 을 사용하여 서버에 대한 POST 요청을 전송한다.
- 매개변수
·url : (String) POST 함수로 연결하는 서버 측 URL
·data : (Object) 이름과 값의 쌍으로 프로퍼티를 가진 객체.
: 미리 구성 및 인코딩 된 쿼리 스트링.
·callBack : (Function) 요청이 완료되면 호출되는 함수.
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>Insert title here</title>
<link rel="stylesheet" type="text/css" href="<%=cp %>/css/main.css">
<style type="text/css">
body
{
font-size: 10pt;
font-family: 굴림;
}
#resultDiv
{
width: 180px;
height: 180px;
border: 2px solid #499bd7;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
// ※ 『$.post(url, data, callBack)』
// - 매개변수로 전달받은 URL 을 사용하여 서버에 대한 POST 요청을 전송한다.
// - 매개변수
// ·url : (String) POST 함수로 연결하는 서버 측 URL
// ·data : (Object) 이름과 값의 쌍으로 프로퍼티를 가진 객체.
// : 미리 구성 및 인코딩 된 쿼리 스트링.
// ·callBack : (Function) 요청이 완료되면 호출되는 함수.
$(function()
{
$("#sendButton").click(function()
{
var su1 = $("#su1").val();
var su2 = $("#su2").val();
var oper = $("#oper").val();
// check~!!!
// $.post();
$.post("PostTest01_ok.jsp", {su1:su1, su2:su2, oper:oper}
, function(args)
{
$("#resultDiv").html(args)
});
//-- data
// ==== Object
// ------
// → {이름:값, 이름:값, ...}
// -------
// 객체를 구성하는 각각의 프로퍼티
});
});
</script>
</head>
<body>
<div>
<h1>jQuery 의 post() 활용 실습</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="resultDiv">
</div>
<br>
</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();
%>
<%
// PostTest01_ok.jsp
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));
%>
<%=result %>PostTest02.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>PostTest02.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<style type="text/css">
#resultDiv
{
width: 300px;
height: 180px;
border: 2px solid #499db7;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#sendBtn").click(function()
{
$.post("PostTest02_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">
제목 : 어쩌구
<br>
내용 : 저쩌구
</div>
<br>
<div>
<input type="radio" name="rdo">rd1
<input type="radio" name="rdo">td2
</div>
<br>
<div>
<input type="checkbox" name="chk">ck1
<input type="checkbox" name="chk">ck2
</div>
<br>
<div>
<input type="text">
</div>
</body>
</html>PostTest02_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();
//PostTest02_ok.jsp
%>
제목 : <b>${param.title}</b>
<br>
내용 : <b>${param.content}</b>! 배워가고 있는 주인장이 쓴 글이니 정보의 정확성에 유의하시기 바랍니다 !
'JAVA개념&실습' 카테고리의 다른 글
| WEB : [0621] Bootstrap (0) | 2023.08.22 |
|---|---|
| WEB : [0619] AJAX 04 (0) | 2023.08.22 |
| WEB : [0616] AJAX 02 (0) | 2023.08.22 |
| WEB : [0613-0616] AJAX 01 (0) | 2023.08.22 |
| WEB : [0612] Jquery02 (0) | 2023.08.22 |