728x90
반응형
1) SpringBoot
1-1) Ajax 예제3
1-1-1) 서버로 객체 보내기 / 서버에서 객체 받아오기 / 서버에서 객체 배열 받아오기 / 서버로 배열 보내기 / 서버로 객체 배열 보내기
1) SpringBoot
1-1) Ajax 예제3
1-1-1) 서버로 객체 보내기 / 서버에서 객체 받아오기 / 서버에서 객체 배열 받아오기 / 서버로 배열 보내기 / 서버로 객체 배열 보내기
(1) [src/main/resources] - [templates] 안에 home.html 파일 생성 후 아래와 같이 작성
<!DOCTYPE html>
<html xmlns:th="http://thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>test_ajax</title>
</head>
<body>
<h1>[ Ajax 예제 ]</h1>
<p>
<a href="ajax1">Ajax 테스트 페이지 1</a>
</p>
<p>
<a href="ajax2">Ajax 테스트 페이지 2</a>
</p>
<p>
<a href="#"></a>
</p>
<p>
<a href="#"></a>
</p>
</body>
</html>
(2) [src/main/resources] - [templates] 안에 ajax2.html 파일 생성 후 아래와 같이 작성
<!DOCTYPE html>
<html xmlns:th="http://thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>test_ajax2</title>
<script src="/js/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
// input box에 입력받은 값들을 객체로 서버에 전달하는 방법
// 방법1 : formButton1 클릭 이벤트
$("#formButton1").click(function() {
let inputData = {
name : $("#name").val(),
age : $("#age").val(),
phone : $("#phone").val()
};
$.ajax({
url: "input1",
type: "post",
data: inputData,
success: function() {
alert("저장되었습니다.");
},
error: function(e) {
alert("저장 실패");
}
});
});
// 방법2 : formButton2 클릭 이벤트
$("#formButton2").click(function() {
$.ajax({
url: "input1",
type: "post",
data: $("#form").serialize(),
success: function() {
alert("저장되었습니다.");
},
error: function(e) {
alert("저장 실패");
}
});
});
$("#button3").click(function() {
$.ajax({
url: "getObject",
type: "get",
dataType: "json",
success: function(ob) {
// $("#objectOutput").html(ob);
let txt = `
<table>
<tr>
<th>이름</th>
<td>${ob.name}</td>
</tr>
</table>
`;
// $("#objectOutput").html(txt);
$("#objectOutput").empty(); // 지우기
$("#objectOutput").append(txt); // 값 추가
},
error: function(e) {
alert("저장 실패");
}
});
});
$("#button4").click(function() {
$.ajax({
url: "getList",
type: "get",
dataType: "json",
success: function(objectList) {
let txt = `
<table>
<tr>
<th>번호</th>
<th>이름</th>
<th>나이</th>
<th>전화번호</th>
</tr>`;
$(objectList).each(function(index, person){
txt += `
<tr>
<td>${index}</td>
<td>${person.name}</td>
<td>${person.age}</td>
<td>${person.phone}</td>
</tr>
`;
});
txt += `</table>`;
$("#listOutput").html(txt);
},
error: function(e) {
alert("저장 실패");
}
});
});
$("#button5").click(function() {
let ar = ['aaaa', 'bbbb', 'cccc'];
$.ajax({
url: "sendArray",
type: "post",
data: {ar : ar},
success: function() {
alert("저장되었습니다.");
},
error: function(e) {
alert("저장 실패");
}
});
});
$("#button6").click(function() {
let ar = [{name:"김", age:10, phone:"111"},
{name:"이", age:20, phone:"222"}];
$.ajax({
url: "sendObjectArray",
type: "post",
data: {ar : JSON.stringify(ar)},
success: function() {
alert("저장되었습니다.");
},
error: function(e) {
alert(JSON.stringify(e));
}
});
});
});
</script>
</head>
<body>
<h1>[ Ajax 테스트 2 ]</h1>
<p>1. 서버로 객체 보내기</p>
<form>
이름 <input type="text" id="name"><br>
나이 <input type="number" id="age" value="0"><br>
전화 <input type="text" id="phone"><br>
<input type="button" id="formButton1" value="저장"><br>
</form>
<p>2. 서버로 객체 보내기</p>
<form id="form">
이름 <input type="text" name="name"><br>
나이 <input type="number" name="age" value="0"><br>
전화 <input type="text" name="phone"><br>
<input type="button" id="formButton2" value="저장"><br>
</form>
<p>3. 서버에서 객체 받아오기</p>
<p><button type="button" id="button3">받기</button></p>
<div id="objectOutput"></div>
<p>4. 서버에서 객체배열 받아오기</p>
<p><button type="button" id="button4">받기</button></p>
<div id="listOutput"></div>
<p>5. 서버로 배열 보내기</p>
<p><button type="button" id="button5">보내기</button></p>
<p>6. 서버로 객체배열 보내기</p>
<p><button type="button" id="button6">보내기</button></p>
</body>
</html>
(3) [src/main/java] - [net.datasa.test_ajax.domain.dto] 안에 PersonDTO.java 파일 생성 후 아래와 같이 작성
package net.datasa.test_ajax.domain.dto;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
@Builder
@Data
@NoArgsConstructor
@AllArgsConstructor
public class PersonDTO {
String name;
int age;
String phone;
}
(4) [src/main/java] - [net.datasa.test_ajax.controller] 안에 Ajax2Controller.java 파일 생성 후 아래와 같이 작성
package net.datasa.test_ajax.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import net.datasa.test_ajax.domain.dto.PersonDTO;
@Slf4j
@RequiredArgsConstructor
@Controller
public class Ajax2Controller {
@GetMapping("ajax2")
public String ajax2() {
return "ajax2";
}
// PersonDTO 객체로 parameter들(name, age, phone)을 받음
@ResponseBody
@PostMapping("input1")
public void input1(PersonDTO personDTO) {
log.debug("전달된 객체 : {}", personDTO);
}
@ResponseBody
@GetMapping("getObject")
public PersonDTO getObject() {
PersonDTO dto = new PersonDTO("김", 22, "010-1111-2222");
return dto;
}
@ResponseBody
@GetMapping("getList")
public List<PersonDTO> getList() {
List<PersonDTO> list = new ArrayList<>();
list.add(new PersonDTO("김OO", 11, "010-1111-2222"));
list.add(new PersonDTO("박OO", 22, "010-1111-3333"));
list.add(new PersonDTO("이OO", 33, "010-1111-4444"));
log.debug("받아올 객체배열 : {}", list);
return list;
}
@ResponseBody
@PostMapping("sendArray")
public void sendArray(@RequestParam("ar") String [] ar) {
for (String s : ar) {
log.debug("전달된 배열요소 : {}", s);
}
}
@ResponseBody
@PostMapping("sendObjectArray")
public void sendObjectArray(@RequestParam("ar") String ar) throws Exception {
log.debug("전달된 객체배열 : {}", ar);
// Jackson : 문자열에서 필요한 값을 꺼내거나 분류하는 등의 작업을 자동으로 처리해주는 라이브러리
// "Jackson"을 사용하는 방법
ObjectMapper objectMapper = new ObjectMapper();
ArrayList<PersonDTO> list =
objectMapper.readValue(ar, new TypeReference<ArrayList<PersonDTO>>() {});
log.debug("Jackson을 활용한 객체배열 : {}", list);
}
}
(5) 결과 화면
첫 접속 화면
"Ajax 테스트 페이지 2" 화면
- "1. 서버로 객체 보내기" 저장 버튼 클릭 시 화면
- "2. 서버로 객체 보내기" 저장 버튼 클릭 시 화면
- "3. 서버에서 객체 받아오기" 받기 버튼 클릭 시 화면
- "4. 서버에서 객체배열 받아오기" 받기 버튼 클릭 시 화면
- "5. 서버로 배열 보내기" 보내기 버튼 클릭 시 화면
- "6. 서버로 객체배열 보내기" 보내기 버튼 클릭 시 화면
