본문 바로가기
[study]이론정리/Spring Boot

Spring MVC - Ajax + json 통신

by yoon9i 2024. 7. 2.

9> Ajax + JSON 통신

  Ajax(jQuery)        JSON
  웹브라우저 ---------------------------------> Controller ( 전달된 JSON을 DTO에 자동 저장 )
                                               @RequestBody
            <---------------------------------
                      값, DTO
  전달된 값/DTO
  을 JSON 받을수있음.
  (@ResponseBody)


  * 최종정리

  웹브라우저                             서버
                    @RequestBody
  JSON       ------------------------>  자바
                 <------------------------
                   @ResponseBody

 

package com.exam;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;


@SpringBootApplication
public class Application {

	public static void main(String[] args) {
		SpringApplication.run(Application.class, args);
	}
}
package com.exam.controller;


import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

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.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;

import com.exam.dto.LoginDTO;

@Controller
public class MainController {
	
	Logger logger = LoggerFactory.getLogger(getClass());
	
	@GetMapping("/")
	public String hello() {
		return "hello";
	}
	// json 받기
	@PostMapping("/aaa")
	public @ResponseBody String aaa(@RequestBody LoginDTO dto) {
		logger.info("logger:@RequestBody:{}", dto);
		
		return "안녕하세요";
	}
	
	@PostMapping("/bbb1")
	public @ResponseBody LoginDTO bbb1(@RequestBody ArrayList<LoginDTO> list) {
		logger.info("logger:@RequestBody:{}", list);
		
		return new LoginDTO("강감찬", "1234");
	}
	
	@PostMapping("/bbb")
	public @ResponseBody List<LoginDTO> bbb(@RequestBody ArrayList<LoginDTO> list) {
		logger.info("logger:@RequestBody:{}", list);
		
		List<LoginDTO> xxx = 
				Arrays.asList(new LoginDTO("강감찬1","1234"), 
							  new LoginDTO("강감찬2","1234")); 
		
		return xxx;
	}
	
}
package com.exam.dto;

public class LoginDTO {

	String userid;
	String passwd;
	
	public LoginDTO() {}

	public LoginDTO(String userid, String passwd) {
		this.userid = userid;
		this.passwd = passwd;
	}

	public String getUserid() {
		return userid;
	}

	public void setUserid(String userid) {
		this.userid = userid;
	}

	public String getPasswd() {
		return passwd;
	}

	public void setPasswd(String passwd) {
		this.passwd = passwd;
	}

	@Override
	public String toString() {
		return "LoginDTO [userid=" + userid + ", passwd=" + passwd + "]";
	}
	
	
}
<%@ page 
         contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"        
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
    	$("#a").on("click", function(){
    		
    		 $.ajax({
    			 url:'aaa',
    			 method:'post',
    			 dataType:'text',
    			 headers:{
    				 'Content-type':'application/json'
    			 },
    			 // {"userid":"홍길동", "passwd":"1234"} 형식을 문자열로 전달
    			 data: JSON.stringify({userid:"홍길동",passwd:"1234"}),
    			 success:function(responseData, status, xhr){
    				 console.log("responseData: ", responseData);
    			 },
    			 error:function(xhr, status, error){
    				 
    			 }
    		 });
    	});// end a
    	
    	
      	$("#b").on("click", function(){
      		 $.ajax({
      			 url:'bbb',
      			 method:'post',
      			 dataType:'text',
      			 headers:{
      				 'Content-type':'application/json'
      			 },
      			 // [{"userid":"홍길동", "passwd":"1234"},...] 형식을 문자열로 전달
      			 data: JSON.stringify([{userid:"홍길동",passwd:"1234"},{userid:"홍길동2",passwd:"9999"}]),
      			 success:function(responseData, status, xhr){
      				console.log("responseData: ", responseData);
      			 },
      			 error:function(xhr, status, error){
      				 
      			 }
      		 });
      	});// end b
    });

</script>
</head>
<body>
<h1>hello.jsp</h1>
<button id="a">JSON요청-단일JSON요청</button>
<button id="b">JSON요청-다중JSON요청(배열)</button>
</body>
</html>
# application.properties
logging.level.org.springframework=info

# tomcat port 번호 변경
server.port=8090

# context 명 변경
server.servlet.context-path=/app

# jsp의 경로와 확장자 지정
spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.jsp
<?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"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
	http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.7.18</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.exam</groupId>
	<artifactId>demo</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>demo</name>
	<description>Demo project for Spring Boot</description>
	<properties>
		<java.version>11</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-devtools -->
		<dependency>
		    <groupId>org.springframework.boot</groupId>
		    <artifactId>spring-boot-devtools</artifactId>
		</dependency>
	<dependency>
		<groupId>org.apache.tomcat.embed</groupId>
		<artifactId>tomcat-embed-jasper</artifactId>
		<scope>provided</scope>
	</dependency> 
	<dependency>
		<groupId>javax.servlet</groupId>
		<artifactId>jstl</artifactId>
	</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

'[study]이론정리 > Spring Boot' 카테고리의 다른 글

Spring MVC - FileUpload & download  (0) 2024.07.02
Spring MVC - redirect 와 forward & redirect-flashScope-forward  (0) 2024.07.02
Spring MVC - Model Scope  (0) 2024.07.02
Spring MVC - Model 생성  (0) 2024.07.02
Spring MVC - 쿠키값 얻기  (0) 2024.07.02

관련글

티스토리툴바