💫 AjaxTest01
# AjaxTest01.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>AjaxTest01.jsp</title>
<link rel="stylesheet" type="text/css" href="<%=cp %>/css/main.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#sendButton").click(function()
{
var params = "name=" + $.trim($("#name").val()) + "&content=" + $.trim($("#content").val());
// ※ jQuery 의 ajax() 함수 사용(호출)
$.ajax(
{
type:"POST"
, url:"AjaxTest01_ok.jsp"
, data:params // url 지정 페이지로 넘길 값 // check~!!
, success:function(args)
{
$("#resultDiv").html(args);
$("#name").val("");
$("#content").val("");
$("#name").focus();
}
, beforeSend:showRequest // true / false 만 확인하면 되니까 showRequest() 이렇게 안쓴다! check~!!!
, error:function(e)
{
alert(e.responseText);
}
});
});
});
function showRequest()
{
if (!$.trim($("#name").val()))
{
alert("이름을 입력해야 합니다.");
$("#name").focus();
return false;
}
if (!$.trim($("#content").val()))
{
alert("내용을 입력해야 합니다.");
$("#content").focus();
return false;
}
return true;
}
</script>
</head>
<body>
<div>
<h1>jQuery 의 ajax() 활용 실습</h1>
<hr>
</div>
<div>
이름 <input type="text" id="name" class="txt"/>
<br><br>
내용 <textarea id="content" cols="50" rows="3"></textarea>
<br><br>
<input type="button" value="등록하기" id="sendBtn"/>
</div>
<br><br>
<div id="resultDiv">
</div>
</body>
</html>➰체크할 내용➰
*** jQuery 의 ajax() 함수 사용(호출) ***
$.ajax(
{
type:"POST" // 데이터 전송 및 페이지 요청 방식
, url:"AjaxTest01_ok.jsp" // 요청 페이지 URL
, data:params // 요청 페이지(AjaxTest01_ok.jsp)에서 수신하게 되는 데이터 즉, 넘길 값!!!
, success:동작 // 페이지요청 및 데이터전달이 성공했을 때의 처리
, beforeSend:반환값확인 // 요청 전 확인해야 할 항목 처리(true/false)
, error:동작 // 처리과정에서 문제가 발생했을 때의 처리
});
# AjaxTest01_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();
%>
<%
// AjaxTest01_ok.jsp
/*
String name = request.getParameter("name");
String content = request.getParameter("content");
*/
%>
<%--
이름 : <b><%=name %></b>
<br>
내용 : <b><%=content %></b>
<br>
--%>
이름 : <b>${param.name }</b>
<br>
내용 : <b>${param.content }</b>
<br>// 주석 처리 해둔 방식으로 데이터 받아와도 되고~ EL 사용해서 받아와도 되고~~
💫 AjaxTest02 (xml로~)
# AjaxTest02.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>AjaxTest02.jsp</title>
<link rel="stylesheet" type="text/css" href="<%=cp %>/css/main.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#sendBtn").click(function()
{
var params = "name=" + $.trim($("#name").val()) + "&content=" + $.trim($("#content").val());
$.ajax(
{
type:"POST"
, url:"AjaxTest02_ok.jsp"
, data:params
, dataType:"xml" //-- check~!!! 넘겨 받는 값의 유형
//, async:false //-- 동기 → 에이작스를 쓰지 않겠다는 말과 동일!!
, success:function(args)
{
var out = "";
out = ">> 게시물 갯수 : " + $(args).find("total_dataCount").text() + "<br>";
$(args).find("comment").each(function()
{
var item = $(this);
var num = item.attr("num");
var name = item.find("name").text();
var content = item.find("content").text();
out += "<br>===========================";
out += "<br> 번호 : " + num;
out += "<br> 이름 : " + name;
out += "<br> 내용 : " + content;
out += "<br>===========================";
});
$("#resultDiv").html(out);
$("#name").val("");
$("#content").val("");
$("#name").focus();
}
, beforeSend:showRequest
, error:function(e)
{
alert(e.responseText);
}
});
});
});
function showRequest()
{
if (!$.trim($("#name").val()))
{
alert("이름을 입력해야 합니다.");
$("#name").focus();
return false;
}
if (!$.trim($("#content").val()))
{
alert("내용을 입력해야 합니다.");
$("#content").focus();
return false;
}
return true;
}
</script>
</head>
<body>
<div>
<h1>jQuery 의 ajax() 활용 실습</h1>
<hr>
</div>
<div>
이름 <input type="text" id="name" class="txt"/>
<br><br>
내용 <textarea id="content" cols="50" rows="3"></textarea>
<br><br>
<input type="button" value="등록하기" id="sendBtn"/>
</div>
<br><br>
<div id="resultDiv">
</div>
</body>
</html>➰체크할 내용➰
$(args).find("comment").each(function() : args에서 comment 태그를 찾아서 각각 함수 실행
var item = $(this); : item 을 각각의 함수로 지정하고 item.num / item.name 이런 식으로 받아옴
var num = item.attr("num");
var name = item.find("name").text();
# AjaxTest02_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();
%><%
// AjaxTest02_ok.jsp → XML 구성
String name = request.getParameter("name");
String content = request.getParameter("content");
response.setContentType("text/xml");
%><?xml version="1.0" encoding="UTF-8"?>
<lists>
<total_dataCount>5</total_dataCount>
<%
for (int i=1; i<=5; i++)
{
%>
<comment num="<%=i %>">
<name><%=name + i %></name>
<content><%=content + i %></content>
</comment>
<%
}
%>
</lists>
💫 AjaxTest03
# ajaxtest03.do, web.xml, AjaxTest03Controller.java, AjaxTest03OkController.java, AjaxTest03_ok.jsp 코드 몽땅 생략~!
이전과 완~~~전 동일하게 코드 구성하면 되거덩용~!
jQuery ajax 코드 구성하는 부분만 다시 한번 확인하기 위해 AjaxTest03.jsp는 다시 작성해서 기록~!!
# AjaxTest03.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>AjaxTest03.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()
{
$("#sendButton").click(function()
{
var params = "su1=" + $("#su1").val() + "&su2=" + $("#su2").val()
+ "&oper=" + $("#oper").val();
$.ajax(
{
type:"POST"
, url:"ajaxtest03ok.do"
, data:params
, success:function(args)
{
$("#result").html(args)
}
, beforeSend:checkInput
, error:function(e)
{
alert(e.responseText);
}
});
});
});
function checkInput()
{
if (!$("#su1").val())
{
alert("첫번째 정수를 입력해야 합니다.");
$("#su1").focus();
return false;
}
if (!$("#su2").val())
{
alert("두번째 정수를 입력해야 합니다.");
$("#su2").focus();
return false;
}
return true;
}
</script>
</head>
<body>
<div>
<h1>jQuery의 ajax() 활용 실습</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>💫 AjaxTest04 (xml로 처리)
# web.xml, AjaxTest04Controller.java 코드 생략
# AjaxTest04.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>AjaxTest04.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()
{
$("#sendButton").click(function()
{
var params = "title=" + $("#title").val() + "&content=" + $("#content").val();
$.ajax(
{
type:"POST"
,url:"ajaxtest04ok.do"
,data:params
,dataType:"xml"
,success:function(xml)
{
var out ="";
$(xml).find("records").each(function()
{
var records = $(this);
var id = records.attr("id");
var title = records.find("title").text();
var content = records.find("content").text();
out += "<br>id = " + id;
out += "<br>-title = " + title;
out += "<br>-content = " + content + "<br>";
});
$("#resultdiv").html(out);
}
, beforeSend:showRequest
, error:function(e)
{
alert(e.responseText);
}
});
});
});
function showRequest()
{
if (!$.trim($("#title").val()))
{
alert("제목을 입력해야 합니다.");
$("#title").focus();
return false;
}
if (!$.trim($("#content").val()))
{
alert("내용을 입력해야 합니다.");
$("#content").focus();
return false;
}
return true;
}
</script>
</head>
<body>
<div>
<h1>jQuery 의 ajax() 활용 실습</h1>
<p>xml control</p>
<hr />
</div>
<div>
제목 <input type="text" id="title" class="txt"/>
<br><br>
내용 <input type="text" id="content" class="txt" />
<br><br>
<input type="button" value="등록하기" id="sendButton" class="btn"/>
</div>
<br>
<div id="resultdiv">
</div>
</body>
</html>
# AjaxTest04OkController.java
protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
// GET 방식이든 POST 방식이든
// 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드
request.setCharacterEncoding("UTF-8");
String title = request.getParameter("title");
String content = request.getParameter("content");
request.setAttribute("title", title);
request.setAttribute("content", content);
String view = "WEB-INF/view/AjaxTest04_ok.jsp";
RequestDispatcher dispatcher = request.getRequestDispatcher(view);
dispatcher.forward(request, response);
}
# AjaxTest04_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();
%><?xml version="1.0" encoding="UTF-8"?>
<root>
<status>true</status>
<%
for (int i=1; i<=2; i++)
{
%>
<records id="<%=i%>">
<title>${title }</title>
<content>${content }</content>
</records>
<%
}
%>
</root>
