! 배워가고 있는 주인장이 쓴 글이니 정보의 정확성에 유의하시기 바랍니다 !
AjaxJquery02
※ 『$.get(url, data, callBack)』
- 매개변수로 전달받은 URL을 사용하여 서버에 대한 GET 요청을 전송한다.
_$:jquery객체 자체를 의미
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">
<style type="text/css">
.txtNum
{
width: 100px;
text-align: right;
}
#result
{
color: red;
font-weight: bold;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
// ※ 『$.get(url, data, callBack)』
// - 매개변수로 전달받은 URL을 사용하여 서버에 대한 GET 요청을 전송한다.
//_$:jquery객체 자체를 의미
$(function()
{
$("#sendButton").click(function()
{
// 확인
//alert("확인~!!");
var su1 = $("#su1").val();
var su2 = $("#su2").val();
var oper = $("#oper").val();
// check~!!!
//$.get()
//$.get("GetTest01_ok.jsp");
//$.get("GetTest01_ok.jsp", {su1:su1, su2:su2, oper:oper});
//$.get("GetTest01_ok.jsp", {su1:su1, su2:su2, oper:oper}, 기능);
/*
$.get("GetTest01_ok.jsp", {su1:su1, su2:su2, oper:oper}, function()
{
});
*/
/*
$.get("GetTest01_ok.jsp",
{
su1:su1,
su2:su2,
oper:oper
}, function()
{
});
--> 이렇게 쓰면 헷갈리니까 콤마를 앞에 쓰자.
*/
/*
$.get("GetTest01_ok.jsp", {su1:su1, su2:su2, oper:oper}, function(args)
{
$("#result").html(args);
});
↓
$.get("요청URL", {이름:값, 이름:값}, function(넘겨받은값)
{
$(선택자).html(받은값처리);
});
*/
$.get("GetTest01_ok.jsp"
, {
su1:su1
, su2:su2
, oper:oper
}, function(args)
{
$("#result").html(args);
});
});
});
</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>
<div>
<input type="radio" name="rdo">rd1
<input type="radio" name="rdo">rd2
</div>
<br>
<div>
<input type="checkbox" name="chk">ck1
<input type="checkbox" name="chk">ck2
</div>
<br>
<div>
<input type="text">
</div>
</body>
</html>
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();
%>
<%
// GetTest01_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%>
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="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">
/* 내가
$(document).ready(function()
{
$("#loadBtn").click(function()
{
var nickName = $("#nickName").val();
$.get("GetTest02.jsp", nickName, function()
{
$("#resultDiv").html(nickName + "님, 안녕하세요.<br>반갑습니다.");
});
});
});
*/
$(function()
{
$("#loadBtn").click(function()
{
var nickName = $("#nickName").val();
$.get("GetTest02_ok.jsp", {nickName:nickName}, function(data)
{
$("#resultDiv").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">
<!-- 슈퍼맨님 안녕하세요.
<br>
반갑습니다. -->
</div>
</body>
</html>GetTest02_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();
%>
<%
//GetTest02_ok.jsp
String nickName = request.getParameter("nickName");
%>
<%-- <%=nickName %>님, 안녕하세요. <br> 반갑습니다. --%>
${param.nickName }님, 안녕하세요.
<br>
반갑습니다.
! 배워가고 있는 주인장이 쓴 글이니 정보의 정확성에 유의하시기 바랍니다 !
'JAVA개념&실습' 카테고리의 다른 글
| WEB : [0619] AJAX 04 (0) | 2023.08.22 |
|---|---|
| WEB : [0616] AJAX 03 (0) | 2023.08.22 |
| WEB : [0613-0616] AJAX 01 (0) | 2023.08.22 |
| WEB : [0612] Jquery02 (0) | 2023.08.22 |
| WEB : [0612] Jquery01 (0) | 2023.08.22 |