JQuery와 AJax를 활용하여 페이지에서 데이터를 주고 받을 수 있다.
JQuery를 사용하기 위해 script 주소를 추가 해 줘야 한다.
<script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
🚀 AJax GET, POST 방식으로 데이터 보내기
데이터를 받아오는 가장 기본적인 형식이다.
$(document).ready(function(){
$.ajax({
type: // 데이터 전송 타입
url : // 데이터를 주고 받는 파일 주소
data: // 보낼 데이터 (데이터 값을 보내지 않을 경우 명시하지 않아도 된다)
dataType: // 문자 형식으로 받기 (데이터를 받아오지 않는 경우 명시하지 않아도 된다)
success: function(result){
},
error:function(){
}
})
});
1. GET
$(document).ready(function(){
$.ajax({
type: 'get', // GET 방식
url : 'TEST.jsp', // 이동할 파일 주소
dataType:'text', // 문자형식으로 받기
success: function(data){
// function(data)를 쓰게 되면 전달받은 데이터가 data안에 담아서 들어오게 된다.
alert(data);
},
error:function(){
alert('error');
}
})
});
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
TEST데이터를 주고 받는 파일인 TEST.jsp 에 다음과 같이 작성하고 위 코드를 실행을 시키면
alert창으로 'TEST'라는 결과 값이 들어오게 된다.
2. POST
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <!--jQuery 불러오기-->
<script>
$(document).ready(function(){
$("#buttonSubmit").on('click',function(){ // submit 이벤트 지정
$.ajax({
url: "./result.jsp", // 이동 할 파일 주소
type: "POST",
data: $("#theForm").serialize(), // 전송 데이터
dataType: 'json', // json 타입으로 받기
success: function(res){
alert("success");
$("#result_name").html(res.name);
$("#result_ph_number").html(res.ph_number);
$("#result_address").html(res.address);
},
error:function(er){
alert("실패 원인 : " + er);
}
});
});
});
</script>
</head>
<body>
<form id="theForm">
<table border="1">
<tr>
<th>이름</th>
<td><input type="text" id="name" name="name"></td>
</tr>
<tr>
<th>번호</th>
<td><input type="text" id="ph_number" name="ph_number"></td>
</tr>
<th>주소</th>
<td><input type="text" id="address" name="address"></td>
</table>
<br>
<input id="buttonSubmit" type="button" value="제출">
</form>
<br>
<table border="1">
<tr>
<th>[확인] 이름</th>
<td style="width: 200px;"><span id="result_name"></span></td>
</tr>
<tr>
<th>[확인] 번호</th>
<td><span id="result_ph_number"></span></td>
</tr>
<th>[확인] 주소</th>
<td><span id="result_address"></span></td>
</table>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
String ph_number = request.getParameter("ph_number");
String address = request.getParameter("address");
%>
{
"name" : "<%=name%>",
"ph_number" : "<%=ph_number%>",
"address" : "<%=address%>"
}
🚀 JQUERY로 AJax 통신할 때 기억할 것 !
- type : 보내는 방식
- url : 데이터 보내는 주소
- data : 보내려는 데이터 → "id" : "userid" 처럼 json 형식으로 보내는 것이 좋음
- json 형태로 보내게 되면 받는 쪽에서는 파라미터에서 넘어온 값처럼 인식하고, jsp에서는 getParameter("파라미터명")을 사용할 수 있다.
- dataType : 응답 데이터 형식
- async : 비동기여부 → true, false
- success : ajax 통신 성공 시 실행 함수. 해당 매개변수에는 ajax를 통해 응답받은 데이터가 들어온다
- error : ajax 통신 실패 시 실행 함수
- complete : 설공 실패와 상관없이 실행 함수
- beforeSend : ajax 통신 보내기 전 실행 함수
'Backend > AJAX' 카테고리의 다른 글
| [AJAX] AJAX가 뭐야? (0) | 2023.02.06 |
|---|