1. 결과물부터 확인하기
2. JSP 페이지
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bookTest.jsp</title>
<script src="../js/jquery-3.6.1.min.js"></script>
<script src="../js/jquery.cookie.js"></script>
</head>
<body>
<h3>교재 선택</h3>
<select name="book" id="book">
<option>--선택 --</option>
<option value="0">spring</option>
<option value="1">Android</option>
<option value="2">jQuery</option>
<option value="3">javaScript</option>
</select>
<br>
<div id="display"></div>
<script>
$("#book").change(function(){
//alert($(this).val());
$.post(
"booksend.do"
,"book="+$(this).val()
,responseProc
);
}); // change() end
function responseProc(result){
$("#display").html("<img src='../images/" + result + "'>")
} // responseProc() end
</script>
</body>
</html>
3. 컨트롤러
package kr.co.itwill.book;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@RequestMapping("/book")
@Controller
public class BookCont {
public BookCont() {
System.out.println("-----------BookCont() 객체 생성됌");
} // end
// 결과 확인 http://localhost:9095/book/book.do
@RequestMapping("/book.do")
public String bookTest() {
return "book/bookTest";
} // bookTest() end
@RequestMapping("/booksend.do")
@ResponseBody
public String bookSend(HttpServletRequest req) {
// 요청한 정보 가져오기
int bookIndex = Integer.parseInt(req.getParameter("book"));
String img[] = {"spring.jpg", "android.jpg", "jquery.jpg", "jsmasterbook.jpg"};
return img[bookIndex];
}// bookSend() end
} // class end'⁂ AJAX > : 기본 익히기' 카테고리의 다른 글
| [AJAX] #5 - 검색 기능 구현하기 (0) | 2022.11.10 |
|---|---|
| [AJAX] #3 - ajax로 ID 중복확인 하기(쿠키 사용) (0) | 2022.11.09 |
| [AJAX] #2 AJAX 기본 문법 뜯어보기 (0) | 2022.11.09 |
| [AJAX] #1 AJAX의 이해 (0) | 2022.11.09 |