jsp에 ajax 통신 적용하기
-input태그에 값을 입력받고, 입력받은 값들을 ajax로 보내고 요청한 결과 가져오기
-페이지 새로고침없이 확인할 수 있음
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
num1 : <input type="text" name="num1"><br>
num2 : <input type="text" name="num2"><br>
<button onClick="sum()">더하기</button>
<!-- ajax에서 제이쿼리를 사용하기 때문에 제이쿼리사용 -->
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function sum(){
$.ajax({
url : "ex01sum",
//같은 프로젝트 내에서 url mapping, 파일명
type : "get",
data : {
"num1" : $('input[name=num1]').val(),
"num2" : $('input[name=num2]').val()
},
//res - 서버에 요청된 결과가 담기게 됨
success : function(res){
//alert("성공");
console.log(res);
},
error : function(){
alert("실패");
}
});
}
</script>
</body>
</html>새로운 컨트롤러 패키지에 jsp에서 지정한 url 주소 그대로 ex01sum 이라는 서블릿 만들기↓↓↓
-수집한 파라미터값이 String이기때문에 형변환해줌 Integer.parseInt
-두 값의 합을 새로운변수에 담고 out객체로 돌려보냄
ajax 특징 : response 인코딩방식 UTF-8만
package Controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ex01sum")
public class ex01sum extends HttpServlet {
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int num1 = Integer.parseInt(request.getParameter("num1"));
int num2 = Integer.parseInt(request.getParameter("num2"));
String result = num1 + "과 " + num2 + "의 합은 " + (num1+num2) + "입니다.";
//되돌려주기 위한 객체 ->response
//ajax로 값을 돌려줄때 PrintWriter
//ajax 특징 : response 인코딩방식 UTF-8만
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
out.print(result);
}
}
f12 콘솔창 : 
Gson을 이용한 통신 : Java에서 Json을 파싱하고, 생성하기 위해 사용되는 구글에서 개발한 오픈소스
json 형태를 가져와 테이블형태로 출력해주기
-Java Object를 Json 문자열로 변환할 수 있고, Json 문자열을 Java Object로 변환할 수 있음
-maven repository 에서 gson 2.8.5 다운받는다-> webapp\web-inf\lib 에 drag&drop
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<button onClick="dataload()">데이터 가져오기</button>
<table border="1">
<thead>
<tr>
<td>이메일</td>
<td>전화번호</td>
<td>주소</td>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
//openAPI 쓸 경우 제이쿼리나 일반 JS문법
function dataload(){
$.ajax({
url : "ex02Gson",
//같은 프로젝트 내에서 url mapping, 파일명
type : "get",
//보낼 데이터가 없어서 생략
dataType : "json",
//dataType 가져올 데이터타입
//res - 서버에 요청된 결과가 담기게 됨
success : function(res){
//alert("성공");
console.log(res);
$('#tbody').html('');
//for문 전 테이블 공간을 초기화
for(let i = 0; i<res.length; i++){
let table = '<tr>';
table += '<td>' + res[i].email + '</td>'
table += '<td>' + res[i].tel + '</td>'
table += '<td>' + res[i].address + '</td>'
table += '</tr>';
//JS에서 html 태그 만드는 방법
//.html() : 덮어쓰는형식
//.after() : 뒤에추가해줌
//.before() : 앞에추가해줌
//.append() : 선택 태그 내부에 추가
$('#tbody').append(table);
}
},
error : function(){
alert("실패");
}
});
}
</script>
</body>
</html>Model 패키지에 MemberDTO 클래스 만들어주기
-생성자, getter setter 까지 (-->ArrayList에 담겨서, 이를 키값을 보내줄 json형태로 보내짐)
package Model;
public class MemberDTO {
private String email;
private String pw;
private String tel;
private String address;
public MemberDTO(String email, String tel, String address) {
super();
this.email = email;
this.tel = tel;
this.address = address;
}
//생성자
public MemberDTO(String email, String pw, String tel, String address) {
super();
this.email = email;
this.pw = pw;
this.tel = tel;
this.address = address;
}
//getter and setter
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPw() {
return pw;
}
public void setPw(String pw) {
this.pw = pw;
}
public String getTel() {
return tel;
}
public void setTel(String tel) {
this.tel = tel;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
}
Controller에 MemberDTO객체 생성후 임의의 데이터를 담아줌
-ArrayList에 < MemberDTO>타입으로 .add 해줌
-데이터를 보내기위해 Gson객체를 생성
-java에서 json 문자열로 만들어주는 메소드 toJson() : String타입으로 Json을 만들어줌 -->out객체에 담아 보내기위해 변수에 담아주기
-out객체를 써서 데이터 보냄
package Controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import Model.MemberDTO;
@WebServlet("/ex02Gson")
public class ex02Gson extends HttpServlet {
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//DTO 객체에 값을 넣어서 ArrayList에 담고 ArrayList 를 json형식으로 전송
MemberDTO member1 = new MemberDTO("email1","010-0101-1210","광주 동구");
MemberDTO member2 = new MemberDTO("email2","010-4545-4543","광주 북구");
MemberDTO member3 = new MemberDTO("email3","010-4544-4344","광주 서구");
MemberDTO member4 = new MemberDTO("email4","010-4444-4444","광주 남구");
ArrayList<MemberDTO> list = new ArrayList<MemberDTO>();
list.add(member1);
list.add(member2);
list.add(member3);
list.add(member4);
//데이터보내기
//Gson객체 생성
Gson gson = new Gson();
//java -> json 문자열로 옮겨가게 만드는 메소드 toJson() : String타입으로 Json을 만들어줌
String json = gson.toJson(list);
//PrintWriter 생성 전 인코딩
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
out.print(json);
}
}
실행결과 :
버튼을 누르면 계속 아래로 쌓이는 문제가 발생 -->
jsp ajax문에 for문 시작 전 $('#tbody').html(''); 을 써서 테이블의 공간을 초기화시켜줌
