📚 Study/JQuery
AJAX :: jQuery의 ajax() 활용 실습 - Json
bono-hye
2024. 1. 7. 00:38
💫 AjaxJquery05
# JsonTest01.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>JsonTest01.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:"JsonTest01_ok.jsp"
, data:params
, dataType:"json"
, success:function(jsonObj)
{
var out = "";
var num = jsonObj.num;
var name = jsonObj.name;
var content = jsonObj.content;
out += "<br>=========================";
out += "<br> 번호 : " + num;
out += "<br> 이름 : " + name;
out += "<br> 내용 : " + content;
out += "<br>=========================";
$("#result").html(out);
$("#name").val("");
$("#content").val("");
$("#name").focus();
}
, beforeSend:function()
{
var flag = true;
if (!$.trim($("#name").val()))
{
alert("이름을 입력해야 합니다.");
$("#name").focus();
flag = false;
}
if (!$.trim($("#content").val()))
{
alert("내용을 입력해야 합니다.");
$("#content").focus();
flag = false;
}
return flag;
}
, errorr:function(e)
{
alert(e.responseText);
}
});
});
});
</script>
</head>
<body>
<div>
<h1>jQuery 의 ajax() 활용 실습</h1>
<p>json control</p>
<hr />
</div>
<div>
이름 <input type="text" id="name" class="txt" />
<br><br>
내용 <input type="text" id="content" class="txt" />
<br><br>
<input type="button" value="등록하기" id="sendBtn" class="btn"/>
</div>
<br><br>
<div id="result">
</div>
</body>
</html>➰체크할 내용➰
1. dataType : Json 사용할 때는 넘겨주는 데이터 타입 "json"으로 지정
2. jsonObj.[ ] : 제이슨은 문자열 구성이지만 내부적으로는 객체화. 따라서 .찍고 접근이 가능하다!!
# JsonTest01_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();
// JsonTest01_ok.jsp
String name = request.getParameter("name");
String content = request.getParameter("content");
String result = "";
// ※ JSON 데이터
// {"이름1":"값1", "이름2":"값2", "이름3":"값3", ...}
StringBuffer sb = new StringBuffer();
/* 따옴표 구성에 유의할 것~!!! */
sb.append("{\"num\":\"" + 1 + "\""); // "{\"num\":\"" + ○ + "\""
sb.append(",\"name\":\"" + name + "\""); // ", \"name\:\"" + ○ + "\""
sb.append(",\"content\":\"" + content + "\"}"); // ", \"content\":\"" + ○ + "\"}"
result = sb.toString();
out.println(result);
%>
💫 AjaxJquery06 - 로딩 이미지 실습
# LoadingTest.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>LoadingTest.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:"LoadingTest_ok.jsp"
, data:params
, success:function(args)
{
$("#result").html(args);
$("#name").val("");
$("#content").val("");
$("#name").focus();
}
, beforeSend:showRequest
, err:function(e)
{
alert(e.responseText);
}
});
});
$(document).ajaxStart(function()
{
// AJAX 요청 시작 시...
$("#loading").show();
$("#result").hide();
}).ajaxComplete(function()
{
// AJAX 요청 종료(완료) 시...
$("#loading").hide();
$("#result").show();
});
});
function showRequest()
{
var flag = true;
if (!$.trim($("#name").val()))
{
alert("이름을 입력해야 합니다.");
$("#name").focus();
flag = false;
}
if(!$.trim($("#content").val()))
{
alert("내용을 입력해야 합니다.");
$("#content").focus();
flag = false;
}
return flag;
}
</script>
</head>
<body>
<div>
<h1>jQuery 의 ajax() 활용 실습</h1>
<p>로딩 이미지 적용</p>
<hr>
</div>
<div>
이름
<input type="text" id="name" class="txt" />
<br><br>
내용
<input type="text" id="content" class="txt" />
<br><br>
<input type="button" value="등록하기" id="sendBtn" class="btn"/>
</div>
<br><br>
<div id="loading" style="text-align: center; display: none;">
<img alt="loading" src="images/loading_01.gif" style="align-items: center;">
</div>
<div id="result">
</div>
</body>
</html>➰체크할 내용➰
1. $(document).ajaxStart(기능,동작,행위).ajaxComplete(기능,동작,행위)
- ajax 가 요청 시작되면 동작할 내용들 정의 / 요청 종료되면 동작할 내용들 정의
- ajax가 요청되면 (LoadingTest_ok.jsp 에서 작성한 코드 -> 처리 시간 지연되면) id="loading"인 div 보여주고 종료되면 숨김!
# LoadingTest_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();
// LoadingTest_ok.jsp
String name = request.getParameter("name");
String content = request.getParameter("content");
try
{
Thread.sleep(5000);
}
catch(Exception e)
{
System.out.println(e.toString());
}
%>
이름 : <%=name %>
<br>
내용 : <%=content %>➰체크할 내용➰
1. Thread.sleep( );
- 의도적으로 처리 시간 지연
- 1/1000 초 단위. 즉, 5000은 5초 지연
