프로그래밍/Spring & Spring boot

[Spring/스프링] jQuery ajax , Fetch ajax(Simple string, JSON)

pupu91 2022. 9. 20. 17:48
반응형

 

@ResponseBody

-  view 페이지가 아닌 반환 값을 클라이언트에게 그대로 반환하고자 할 때 사용하는 어노테이션

- 위치는 메소드 레벨, 반환 값 레벨 모두 가능

 

@RequestBody

- 요청에 넘어오는 바디 값이 매개변수에 전달 됨

 

 

simple string 서버 전송 테스트

 

 

 

1) jQuery ajax

: jQuery 에서 제공하는 ajax 메소드를 사용하면 통신에 필요한 설정을 간편하게 객체로 전달할 수 있고 크로스 브라우징   이슈도 손쉽게 해결할 수 있음

 

 

- jsp에 script 작성

jsp에 작성

    전달 값 : <input type="text" name="keyword" id="param"><br>
	응답 값 : <p id="result"></p>
    
   <button onclick="sendJquery();"> jQuery로 전송</button>
   
<script>
	function sendFetch(){
			
	  const keyword = document.querySelector("#param").value; // 입력값을 뽑는 코드
			
          //$.ajax 매소드를 호출하면서 내가 원하는 설정값들을 객체로 전달하기
	  $.ajax({ 
			  url : '${pageContext.servletContext.contextPath}/jquery/simple-string',
			  data : { keyword }, //url인코딩 방식으로 넘어감. name=name?keyword=keyword?
			  method : "GET",
                 	  // 성공했을때 하고 싶은 동작을 function으로 정의
		     	  success : function(data, status, xhr){ //xhr :XmlHttpRequest객체
                 	  // 이 통신에 대해서 수행하고 돌아온 xhr 객체의 값, status는 상태 문자열 반환(성공,에러)
			  console.log(data, status, xhr); 
                  	 // 상태에 따라서 화면에 값을 보여주는는 코드
			  document.querySelector("#result").innerText = data; //첫번째 매개변수인 data를 응답값으로 넣어주기
				},
			  error : function(xhr, status){//status 상태를 나타내는 문자열로 넘오옴 성공/에러
				console.log(xhr, status);
			  document.querySelector("#result").innerText = '요청 응답에 실패하였습니다';
				}	
			}); 			
		}
</script>

 

 

 

- SimpleStringController.java

@Controller
public class SimpleStringController {

	@GetMapping("/simple-string")
	public String showSimpleString() {
		
		return "ajax/1_simple-string";
	}
    
    @GetMapping(value="/jquery/simple-string", produces="text/html; charset=UTF-8")
	@ResponseBody
	public String jquerytTest(@RequestParam String keyword) {
		
		System.out.println(keyword);
		String responseText = "서버로 전달 된 문자열은" +" '"+ keyword +"' "+ "입니다.";
		
		return responseText;
	}
 }

 

 

 

2) fetch ajax

: Promise 기반으로 만들어진 기능으로 ES6부터 JavaScript 내장 라이브러리가 되어 별도의 라이브러리 추가가 필요하지 않음.  대부분의 모던 웹 브라우저에서는 사용 가능하지만 구 버전 브라우저에서는 동작하지 않는 문제가 있을 수 있음

 

 

- jsp에 script 작성

	전달 값 : <input type="text" name="keyword" id="param"><br>
	응답 값 : <p id="result"></p>
    
    <button onclick="sendFetch();"> fetch로 전송</button>
    
<script>
	
	function sendFetch() {
			
	  const keyword = document.querySelector("#param").value;
	  //get방식은 인자에 요청값만 넣기
	  fetch('${pageContext.servletContext.contextPath}/fetch/simple-string?keyword='+keyword) //요청값만 넣어주면 되융
		//요청url에 따라서 키워드가 전송이 될거고
              .then(res => res.text()) // then메소드로 응답 값 꺼내기
             //입력한 값을 서버에서 문자열로 만들어서 반환 -> 그 결과는 res(리스폰스)객체 내부에 존재-> 돌아온 res를 텍스트로 꺼내고
	      .then(test => document.querySelector("#result").innerText = text);
             //꺼낸 결과가 그 다음 then의 매개변수로 전달됨(text)  = 전달된 text를 화면에 적용
		};
</script>

 

 

 

- SimpleStringController.java

@Controller
public class SimpleStringController {

	
	@GetMapping("/simple-string")
	public String showSimpleString() {
		
		return "ajax/1_simple-string";
	}
	

	@GetMapping(value="/fetch/simple-string", produces="text/html; charset=UTF-8")
	@ResponseBody
	public String fetchTest(@RequestParam String keyword) {
		
		System.out.println(keyword);
		String responseText = "서버로 전달 된 문자열은" +" '"+ keyword +"' "+ "입니다.";
		
		return responseText;
	}
}

 

JSON 데이터 서버 전송 테스트

 

 

 

- UserDTO

public class UserDTO {

	private int id;
	private String nickname;
	private int age;
	private String email;
	@JsonFormat(pattern = "yyyy-MM-dd")
	private Date registDate;
	
	
	public UserDTO() {}
	
	public UserDTO(int id, String nickname, int age, String email, Date registDate) {
		super();
		this.id = id;
		this.nickname = nickname;
		this.age = age;
		this.email = email;
		this.registDate = registDate;
	}
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getNickname() {
		return nickname;
	}
	public void setNickname(String nickname) {
		this.nickname = nickname;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public Date getRegistDate() {
		return registDate;
	}
	public void setRegistDate(Date regisDate) {
		this.registDate = regisDate;
	}

	@Override
	public String toString() {
		return "UserDTO [id=" + id + ", nickname=" + nickname + ", age=" + age + ", email=" + email + ", regisDate="
				+ registDate + "]";
	}	
}

 

 

- jps 작성

<h3>회원 정보 입력</h3>
<table>
	<tr>
		<td>닉네임</td>
		<td><input type="text" name="nickname" id="nickname"></td>			
	</tr>
	<tr>
		<td>나이</td>
		<td><input type="number" name="age" id="age"></td>			
	</tr>		
	<tr>
		<td>이메일</td>
		<td><input type="email" name="email" id="email"></td>			
	</tr>	
	<tr>
		<td>가입일</td>
		<td><input type="date" name="registDate" id="registDate"></td>			
	</tr>		
</table>
	
<h3>테이블로 회원 정보 불러오기</h3>
	<table class="userInfo">
	
	
	</table>
	
	<button onclick="receiveJquery();">jQuery로 전송 후 응답 처리</button>
	<button onclick="receiveFetch();">fetch로 전송 후 응답 처리</button>

 

반응형

1)  jQuery ajax

- jsp에 script 작성

: 템플릿 리터럴(``) 내의 달러 기호가 EL로 해석되어 서버에서 처리 되어서 빈 값으로 리턴되는 문제가 있을 수 있다
  기본적으로는 js 파일을 JSP에서 분리해서 별도의 파일로 작성하는 것이 좋으나 여기서는 간단하게 역슬래시를 붙여 EL    해석을 막고  템플릿 리터럴 내의 변수 표기로 인식할 수 있게 했다.

<script>
	
function createTrString(item){
// 하나의 tr문자열을 만들어서 반환 시키기 위한  메소드 
// ex) (item){id 1, name : 홍길동 ...} 유저정보를 전달 받으면 문자열로 바꿔 줌
 return`
  <tr>
	<td>아이디 : \${item.id} </td>
	<td>닉네임 : \${item.nickname}</td>
	<td>나이 : \${item.age}</td>
	<td>이메일 : \${item.email}</td>
	<td>가입일 : \${item.registDate}</td>
  </tr>
	`;	
}//item에 전달 된 객체로부터 id와 nickname 등을 뽑는다.
	
function receiveJquery(){
			
 $.ajax({
	url : '${pageContext.servletContext.contextPath}/jquery/json',
	method : 'GET',
	error : xhr => console.log(xhr),
	success : responseJson => {
		const table = document.querySelector(".userInfo"); //값을 집어넣고 싶은 테이블영역 선택
		table.innerHTML = responseJson.map(item => createTrString(item)).join(''); //responseJson배열을 tr로 바꿔주는 코드
                //table영역의 HTML을 변경할건데 응답받은 배열을 대상으로 Map이라는 함수를 동작시키고,
                //createTrString호출하고(item 하나의 유저 객체를 전달)
                // join으로 문자열 합치기
	}			
  });
}
 </script>

 

 

 

- JsonDataController.java

@Controller
public class JsonDataController {

      //유저정보 응답하기 위한 코드
	private final List<UserDTO> userList;
	
	public JsonDataController() {
		userList = new ArrayList<>();
		userList.add(new UserDTO(1, "유관순", 16, "YOO123@greedy.com", new Date()));
		userList.add(new UserDTO(2, "홍길동", 20, "123@greedy.com", new Date()));
		userList.add(new UserDTO(3, "신사임당", 30, "sing123@greedy.com", new Date()));
	}
	
	
	@GetMapping("/json-data")
	public String showJsonData() {
		
		return "ajax/2_json-data";
	}
	
    
        @PostMapping("/jquery/json")
	public @ResponseBody String jqueryJsonTest(@RequestBody List<UserDTO> requestBody) {
			
		System.out.println("requestBody : " + requestBody);
		
		return "success";
	}
    
}

 

 

 

2) Fetch ajax

 

- jsp에 script 작성

<script>
function createTrString(item){
			
 return`
 <tr>
	<td>아이디 : \${item.id} </td>
	<td>닉네임 : \${item.nickname}</td>
	<td>나이 : \${item.age}</td>
	<td>이메일 : \${item.email}</td>
	<td>가입일 : \${item.registDate}</td>
 </tr>
`;	
}

async function receiveFetch(){
			
 const table = document.querySelector(".userInfo");
 const response = await fetch('${pageContext.servletContext.contextPath}/fetch/json');
 // fetch get방식 요청-> response 객체가 돌아오면, response객체에 json방식으로 추출하여 진짜 결과 받기
 const result = await response.json();
 table.innerHTML = result.map(item => createTrString(item)).join('');
 /* result : [ {},{],{} ] 객체로 된 배열
    map(item => createTrString(item)) : map을 이용해서 한명한명씩 tr로 된 문자열로 값을 바꾼다. ["<tr>","<tr>"]
    join('') : 배열인 상태를 공백없이 하나의 문자열로 합친다 <tr> ~ </tr> */
}
</script>

 

 

 

- JsonDataController.java

public class JsonDataController {
	
	//유저정보 응답하기 위한 코드
	private final List<UserDTO> userList;
	
	public JsonDataController() {
		userList = new ArrayList<>();
		userList.add(new UserDTO(1, "유관순", 16, "YOO123@greedy.com", new Date()));
		userList.add(new UserDTO(2, "홍길동", 20, "123@greedy.com", new Date()));
		userList.add(new UserDTO(3, "신사임당", 30, "sing123@greedy.com", new Date()));
	}
	
	
	@GetMapping("/json-data")
	public String showJsonData() {
		
		return "ajax/2_json-data";
	}
    
    	@PostMapping("/fetch/json")
	public @ResponseBody String fetchJsonTest(@RequestBody List<UserDTO> requestBody) {
		
		System.out.println("requestBody : " + requestBody);
		
		return "success";
	}

 

jackson databind 라이브러리 의존성이 있으면 응답 시에도 자바 객체를 JSON형식으로 자동 변환 해줌

	@GetMapping("/jquery/json")
	public @ResponseBody List<UserDTO> JqueryJsonTest(){
		
		return userList;
	}
	
	@GetMapping("/fetch/json")
	public @ResponseBody List<UserDTO> fetchJsonTest(){
		
		return userList;
	}

 

반응형
저작자표시 비영리 변경금지

'프로그래밍 > Spring & Spring boot' 카테고리의 다른 글

[Spring/스프링] JPA(Java Persistence API)  (0) 2022.09.23
[Spring/스프링] JUnit이란?  (0) 2022.09.20
[Spring/스프링] 파일 업로드 (single file , multi file )  (0) 2022.09.11
[Spring/스프링] SimpleMappingExceptionResolver / @ExceptionHandler 사용하여 예외 처리  (0) 2022.09.07
[Spring/스프링] redirect / RedirectAttribute - flashAttribute / ModelAndView  (0) 2022.09.07

'프로그래밍/Spring & Spring boot'의 다른글

  • 현재글[Spring/스프링] jQuery ajax , Fetch ajax(Simple string, JSON)

관련글

댓글

티스토리툴바