💫 PostTest01
# 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;
pause: 4px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#sendBtn").click(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">
</div>
</body>
</html>➰체크할 내용➰
[ post() ]
- 『$.post(url, data, callBack);』 : 매개변수로 전달받은 URL 을 사용하여 서버에 대한 POST 요청을 전송
· url : (String) POST 함수로 연결하는 서버 측 URL
· data : (Object) 이름과 값의 쌍으로 프로퍼티를 가진 객체. 미리 구성 및 인코딩 된 쿼리 스트링
· callBack : (Function) 요청이 완료되면 호출되는 함수
# 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>
💫 PostTest02
# $.post() 직접 쓰는 부분 외에 다른 코드는 다른 실습과 동일! 하니 생략~
# 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>Insert title here</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()
{
$("#sendButton").click(function()
{
$.post("posttest02ok.do", {su1:$("#su1").val(), su2:$("#su2").val(), oper:$("#oper").val()}
,function(data)
{
$("#result").html(data)
});
});
});
</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="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>
