ㅁ manage1.jsp 수정
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="${contextPath}/resources/js/jquery-3.7.1.min.js"></script>
</head>
<body>
<h3>회원관리 1번 페이지</h3>
<form id="mem-form">
번호 : <input type="text" name="userNo"> <br>
아이디 : <input type="text" name="userId"> <br>
비밀번호 : <input type="text" name="userPwd"> <br>
<button type="button" onclick="fn_ajax1();">조회1(아이디, 비번으로 이름 조회)</button>
<button type="button" onclick="fn_ajax2();">조회2(아이디, 비번으로 이름 조회)</button>
<button type="button" onclick="fn_ajax3()">조회3(번호로 회원전체정보 조회)</button>
<button type="button" onclick="">전체조회</button>
<br>
<button type="button" onclick="">번외1</button>
<button type="button" onclick="">번외2</button>
</form>
<hr>
<div id="result">
결과가 보여지는 영역
</div>
<script>
// 조회1 버튼 : 아이디랑 비번으로 이름을 조회
function fn_ajax1() {
let id = $("input[name=userId]").val();
let pwd = $("input[name=userPwd]").val();
$.ajax({
// 요청
url: "${contextPath}/member1/detail1.do",
data: "id=" + id + "&pwd=" + pwd, // 쿼리스트링으로 전달값 작성
type: "get",
// 응답
success: function(resData){
$("#result").text(resData);
},
error: function(){
}
})
}
function fn_ajax2() {
$.ajax({
url: "${contextPath}/member1/detail2.do",
type: "get",
data: $("#mem-form").serialize(), // form의 모든 입력요소들을 직렬화
success: function(resData){
$("#result").text(resData);
},
error: function(){
console.log("조회2 버튼에 대한 ajax 통신 실패");
}
})
}
// 회원 전체 정보 조회(1명 - dto)
function fn_ajax3() {
$.ajax({
url: "${contextPath}/member1/detail3.do",
type: "get",
data: { no: $('input[name=userNo]').val() },
success: function(resData){
console.log(resData);
let value = '<ul>'
+ '<li>번호: ' + resData.userNo + '</li>'
+ '<li>아이디: ' + resData.userId + '</li>'
+ '<li>이름: ' + resData.userName + '</li>'
+ '</ul>';
$('#result').html(value);
},
error: function(){
console.log("조회3 버튼에 대한 ajax 통신 실패");
}
})
}
</script>
</body>
</html>
- 3번째 버튼 만들고, 3번째 함수 생성.
- $.ajax로 url을 요청한다.
$.ajax는 비동기적으로 서버에 요청을 보내는 jQuery 메서드다.
- 주로 상단에는 요청과 관련된 코드를, 하단에는 응답과 관련된 코드를 작성한다.
success 이전은 요청 처리고, success부터는 응답 처리다.
- 응답 데이터가 배열인지 객체인지 보기 위해 console.log로 찍어본다.
ㅁ MemberController1 수정
package com.br.ajax.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.br.ajax.service.MemberService;
import lombok.RequiredArgsConstructor;
@RequestMapping("/member1")
@RequiredArgsConstructor
@Controller
public class MemberController1 {
private final MemberService memService;
private Logger logger = LoggerFactory.getLogger(MemberController1.class);
/* 기존의 HttpServletResponse 객체 이용하는 방식
@GetMapping("/detail1.do")
public void memberDetail(String id, String pwd, HttpServletResponse response) throws IOException {
logger.debug("request id: {}, pwd: {}", id, pwd);
String result = memService.selectMemberByIdPwd(id, pwd);
response.setContentType("text/html; charset=utf-8");
PrintWriter out = response.getWriter();
out.print(result);
}
*/
// Spring 방식
@ResponseBody
@GetMapping(value="/detail1.do", produces="text/html; charset=utf-8")
public String memberDetail(String id, String pwd) {
logger.debug("request id: {}, pwd: {}", id, pwd);
String result = memService.selectMemberByIdPwd(id, pwd);
return result;
}
@ResponseBody
@GetMapping(value="/detail2.do", produces="text/html; charset=utf-8")
public String memberDetail2(String userId, String userPwd) {
return memService.selectMemberByIdPwd(userId, userPwd); // 문자열 바로 반환
}
@ResponseBody
@GetMapping(value="/detail3.do", produces="application/json")
public MemberDto memberDetail3(@RequestParam(value="no", defaultValue="1") int no) { // 요청시 전달값 받기
MemberDto mem = memService.selectMemberByNo(no);
return mem; // {필드명:필드값, 필드명:필드값, ...}
}
}
- 1, 2번째가 문자열을 반환했다면 이번에는 DTO 객체를 반환하고 있다.
- 이런 dto 객체는 json으로 반환했어야 했다. 우리가 직접 json 오브젝트 객체를 생성해서 돌려줬었다.
이걸 대신해주는 gson이라는 라이브러리도 사용했었다.
json을 쓰든 gson을 쓰든 결국에는 json으로 반환했어야 했다.
- 여기서도 마찬가지로 json으로 반환해야 한다.
- ~ @ResponseBody를 붙여야 한다.
- 자바 객체 (Dto, List, Map, 배열 등)를 응답할 때는 json 데이터로 변환해서 응답해야 된다.
스프링에서도 gson 라이브러리를 연동하면 기존 방식으로도 가능하다.
그런데 그 때는 response 객체도 제시해야 한다. 귀찮다.
- 자동으로 json으로 변환처리해주는 jackson 라이브러리를 등록하면 바로 반환만 하면 된다.
- 문자셋(charset 속성)은 됐고 MIME 타입은 지정해줘야 한다.
produces 속성에 "application/json"을 작성한다.
ㅁ pom.xml에 라이브러리 추가
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
<modelVersion>4.0.0</modelVersion>
<groupId>com.br</groupId>
<artifactId>ajax</artifactId>
<name>03_Spring_Logging_AJAX</name>
<packaging>war</packaging>
<version>1.0.0-BUILD-SNAPSHOT</version>
<properties>
<java-version>11</java-version>
<org.springframework-version>5.3.27</org.springframework-version>
<org.aspectj-version>1.9.19</org.aspectj-version>
<org.slf4j-version>2.0.7</org.slf4j-version>
</properties>
<dependencies>
<!-- Spring -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${org.springframework-version}</version>
<exclusions>
<!-- Exclude Commons Logging in favor of SLF4j -->
<exclusion>
<groupId>commons-logging</groupId>
<artifactId>commons-logging</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${org.springframework-version}</version>
</dependency>
<!-- AspectJ -->
<dependency>
<groupId>org.aspectj</groupId>
<artifactId>aspectjrt</artifactId>
<version>${org.aspectj-version}</version>
</dependency>
<!-- Logging -->
<dependency>
<groupId>ch.qos.logback</groupId>
<artifactId>logback-classic</artifactId>
<version>1.4.14</version>
<!-- <scope>test</scope> 이건 지워야 함 -->
</dependency>
<dependency> <!-- 기존 dependency 중 이것만 남기고 다 지운다.-->
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>${org.slf4j-version}</version>
</dependency>
<!-- @Inject -->
<dependency>
<groupId>javax.inject</groupId>
<artifactId>javax.inject</artifactId>
<version>1</version>
</dependency>
<!-- Servlet -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>javax.servlet.jsp-api</artifactId>
<version>2.3.3</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<!-- Test -->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.13.2</version>
<scope>test</scope>
</dependency>
<!-- Lombok 라이브러리 추가 -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.12</version>
<scope>provided</scope>
</dependency>
<!-- Jackson 라이브러리 추가 -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.14.2</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<artifactId>maven-eclipse-plugin</artifactId>
<version>2.9</version>
<configuration>
<additionalProjectnatures>
<projectnature>org.springframework.ide.eclipse.core.springnature</projectnature>
</additionalProjectnatures>
<additionalBuildcommands>
<buildcommand>org.springframework.ide.eclipse.core.springbuilder</buildcommand>
</additionalBuildcommands>
<downloadSources>true</downloadSources>
<downloadJavadocs>true</downloadJavadocs>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.1</version>
<configuration>
<source>${java-version}</source>
<target>${java-version}</target>
<compilerArgument>-Xlint:all</compilerArgument>
<showWarnings>true</showWarnings>
<showDeprecation>true</showDeprecation>
</configuration>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.2.1</version>
<configuration>
<mainClass>org.test.int1.Main</mainClass>
</configuration>
</plugin>
</plugins>
</build>
</project>
- 첫번째로 나오는 Jackson Databind에서 2.14.2 버전의 dependecy 태그를 복사해서 롬복 라이브러리 추가 구문 다음에 붙여넣는다.
ㅁ 서버 start
- ajax로 화면의 일부 요소만 바뀌었다.
'Spring' 카테고리의 다른 글
| [Spring] MVC2 (5) ajax4 - 5번째 버튼 (0) | 2024.10.21 |
|---|---|
| [Spring] MVC2 (4) ajax3 - 4번째 버튼 (0) | 2024.10.21 |
| [Spring] MVC2 (2) ajax - 1, 2번째 버튼 (2) | 2024.10.18 |
| [Spring] MVC2 (1) 로깅, ajax (0) | 2024.10.18 |
| [Spring] Spring MVC 정리 (1) | 2024.10.17 |
