웹개발 교육/Spring

[73일] Spring (16) - Ajax 이미지 출력

2022. 11. 9. 17:56

위와 같이 이미지를 출력해보자

 

생성

 

bookTest.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<title>bookTest.jsp</title>
	<script src="../js/jquery-3.6.1.min.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>
	
	</script>
</body>
</html>

 

패키지와 클래스 생성

 

BookCont.java

package kr.co.itwill.book;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class BookCont {

	public BookCont() {
		System.out.println("-----BookCont()객체 생성됨");
	}//end
	
	//결과 확인 http://localhost:9095/book/book.do 
	
	@RequestMapping("book/book.do")
	public String bookTest() {
		return "book/bookTest";
	}//bookTest() end
	
}//class end

	@RequestMapping("book/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

 

bookTest.jsp

	<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>

'웹개발 교육 > Spring' 카테고리의 다른 글

[74일] Spring (18) - MyBatis 프로젝트 (설정, 첫페이지, 목록)  (0) 2022.11.10
[74일] Spring (17) - Ajax 검색  (0) 2022.11.10
[73일] Spring (15) - Ajax 아이디 중복 확인(cookie)  (0) 2022.11.09
[73일] Spring (14) Ajax - 서버에서 응답 받기  (0) 2022.11.09
[71일] spring (13) - mymelon 호스팅  (0) 2022.11.07
'웹개발 교육/Spring' 카테고리의 다른 글
  • [74일] Spring (18) - MyBatis 프로젝트 (설정, 첫페이지, 목록)
  • [74일] Spring (17) - Ajax 검색
  • [73일] Spring (15) - Ajax 아이디 중복 확인(cookie)
  • [73일] Spring (14) Ajax - 서버에서 응답 받기
ewok
ewok
ewok
기록장
ewok
전체
오늘
어제
  • 분류 전체보기
    • 웹개발 교육
      • HTML
      • CSS
      • JavaScript
      • Database
      • Java
      • jQuery
      • Ajax
      • Bootstrap
      • jsp
      • Spring
      • MyBatis
      • 프로젝트
    • JAVA
    • SpringBoot
      • 기초
      • AWS
      • 개인프로젝트
    • Spring Security
    • JPA
    • 테스트코드
    • Error
    • CS
      • 컴퓨터 구조
      • 이산수학
    • 알고리즘
      • 정리
      • Java
    • SQL
    • 자격증
      • SQLD
      • 정보처리기사
    • Git

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • sqld 합격
  • 생성자
  • 브랜치
  • 버전 관리
  • base
  • this
  • SQLD
  • merge commit
  • git bash
  • GIT
  • 노랭이
  • sqld 자격증
  • org.hibernate.tool.schema.spi.CommandAcceptanceException
  • branch
  • org.springframework.beans.factory.UnsatisfiedDependencyException

최근 댓글

최근 글

hELLO · Designed By 정상우.
ewok
[73일] Spring (16) - Ajax 이미지 출력
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.