[AJAX] #4 - AJAX로 사진 띄우기

김갱환 2022. 11. 9. 17:56

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

저작자표시 비영리 동일조건 (새창열림)