@Controller vs @RestController
@Controller : 결과를 뷰 페이지(.jsp) 이름 반환
@RestController
- 별도의 뷰를 제공하지 않은 채 데이터 반환
- @ResponseBody와 기능 동일 (메소드에서 처리)
- 클래스에 붙임
@RestController 예제 : 상품 검색 기능
index.jsp 내용 추가
<hr>
<h3>@RestController 연습</h3>
<a href="product/productSearchForm3">상품 검색 3</a><br><br>
productSearchForm3.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 검색</title>
<script src="<c:url value='/js/jquery-3.6.0.min.js'/>"></script>
<script src="<c:url value='/js/productSearch3.js'/>"></script>
</head>
<body>
<h3>상품 검색</h3>
<form id="prdSearchFrm3">
<select id="type" name="type">
<option value="">검색 조건 선택</option>
<option value="prdName">상품명</option>
<option value="prdCompany">제조회사</option>
</select>
<input type="text" name="keyword">
<input type="submit" value="검색">
</form>
<div id="searchResultbox"></div>
</body>
</html>
productSearch3.js
/**
* productSearch3.js
상품 검색
*/
$(document).ready(function(){
$('#prdSearchFrm3').on('submit', function(){
event.preventDefault();
var formData = $(this).serialize();
// serialize() : 폼에 입력한 값을 쿼리 스트링 방식의 데이터로 변환
//type=prdName&keyword=노트북...
$.ajax({
type:"post",
url:"productSearch3",//@RestController로 요청
data:formData,
success:function(result){ // 컨트롤러에서 반환한 prdList를 result가 받음
//alert(result.length);
// 반환된 결과(ArrayList<ProductVO>)를 searchResultbox에 테이블 형태로 출력
$('#searchResultbox').empty();
$('#searchResultbox').append('<table id="resultTable" border="1" width="600">' +
'<tr><th>상품번호</th><th>상품명</th><th>가격</th>' +
'<th>제조사</th><th>재고</th><th>사진</th></tr>');
if(result == ""){
$('#resultTable').append('<tr align="center"><td colspan="6">찾는 상품이 없습니다 </td></tr>');
}else{
for(var i=0; i <result.length; i++){
$('#resultTable').append('<tr><td>' + result[i].prdNo + '</td><td>' +
result[i].prdName + '</td><td>' +
result[i].prdPrice+ '</td><td>' +
result[i].prdCompany + '</td><td>' +
result[i].prdStock + '</td><td>' +
'<img src="/mybatis/images/' + result[i].prdNo + '.jpg" width="30" height="20"></td></tr>');
}
}
$('#searchResultbox').append('</table>');
},
error:function(data, textStatus){
alert("전송 실패");
}
});
});
});
ProductContoller : productSearchForm3 폼 요청 처리
// 상품 검색 폼3로 이동
@RequestMapping("/product/productSearchForm3")
public String productSearchForm3() {
return "product/productSearchForm3";
}
MVCRestController : 검색 요청 처리 / 결과 데이터 반환
package com.spring_mvc.mybatis.controller;
import java.util.ArrayList;
import java.util.HashMap;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import com.spring_mvc.mybatis.model.ProductVO;
import com.spring_mvc.mybatis.service.ProductService;
@RestController
public class MVCRestController {
@Autowired
ProductService service;
// 상품 검색3
@RequestMapping("/product/productSearch3")
public ArrayList<ProductVO> productSearch3(@RequestParam HashMap<String, Object> param,
Model model){
ArrayList<ProductVO> prdList = service.productSearch(param);
model.addAttribute("prdList", prdList);
return prdList;
}
}'Backend > AJAX' 카테고리의 다른 글
| ajax 기초 개념 및 사용법 (0) | 2022.03.02 |
|---|---|
| Ajax (Asynchronous JavaScript and XML) (0) | 2022.01.11 |
| Synchronous(동기식) / Asynchronous(비동기식) 통신 (0) | 2022.01.11 |
| REST (0) | 2022.01.11 |