타닥타닥 개발자의 일상

Spring에서 JSP, java, Ajax, java Script이용한 기초 페이지 만들기 본문

코딩 기록/Spring

Spring에서 JSP, java, Ajax, java Script이용한 기초 페이지 만들기

NomadHaven 2021. 12. 29. 00:09

기본 디렉토리 구성

 

처음 접속하면 뜨는 화면

 

 

 

<이 화면을 보이게하는 인덱스(jsp파일) 코드>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<a href="hello.do">hello</a>  

<%
	response.sendRedirect("home.do"); //바로 home으로 보내는 코드
%>

</body>
</html>

 

response.sendRedirect("home.do");에 따라 home으로 이동하면 아래와 같은 화면이 뜬다.

 

 

<상기 화면을 구성하는home.jsp파일 코드>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<h2>home jsp입니다.</h2>

이름:<input type="text" id="alias"><br><br>
<button type ="button" id="abtn">별명체크</button>
<h3 id="answer"></h3>

<script type="text/javascript">
$("#abtn").click(function(){

 	$.ajax({
 		url:"alias.do",   //input에서 입력받은 이름의 id
 		type:"get",			//전달 방식
 		data:"alias=" + $("#alias").val(),  //---------------------보낼 데이터들의 세팅
 		
 		success:function(rep){
 			alert('success');
 			alert(rep);
 			
 			$("#answer").text(rep);			//----------------------받은 데이터의 처리
 		},
 		error:function(){
 			alert('error');
 		}
 		
 	});

});
</script>
<p id="demo"></p>  //하단의 jsonData 변수를 출력한것

<script type="text/javascript">

let jsonData =  [
	
				{
					"title":"탈무드",					
					"date" :"2021.05.12",
					"price":5400
					
				},
				{
					"title":"세계 경제 흐름",					
					"date" :"2017.03.27",
					"price":6200
					
				},
				{
					"title":"머신러닝과 딥러닝",					
					"date" :"2019.04.25",
					"price":32000
					
				}
				];

document.getElementById("demo").innerHTML = jsonData[1].price;
alert(jsonData); //알림창으로 [object Object],[object Object],[object Object]가 출력

</script>

<br><br>

<button type="button" onclick ="getlist()">Get List</button>
<div id="human"></div>  //Get List 버튼을 누를시 정보가 출력될 곳

<script type="text/javascript">
function getlist(){
	
	$.ajax({
		url:"getlist.do",
		type:"get",
		data:{ msg : "hi"},		//웹 페이지에는 표시되지 않는다.
		success: function( rep ){
			
		let str = JSON.stringify(rep); // stringfy : json -> string으로 바꾸는 함수
	
		for(i=0;i<rep.length;i++){
			
			let s = rep[i].job + " " + rep[0].age + "<br>";
			
			$("#human").append(s); //id가 human인 div구역에 회신 받은 rep 정보 출력
		}	
	
		},
		error:function(){
			alert("error");
		}
		
	})
	
	
}
</script>


</body>
</html>

 

 

<요청받은 자료를 전달하는 HelloController.java 코드>

 

package multi.camp.a;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import multi.camp.a.dto.HumanDto;

@Controller
public class HelloController {
	
private static Logger logger = LoggerFactory.getLogger(HelloController.class);
	
	@RequestMapping(value="hello.do", method = RequestMethod.GET)
	public String hello(Model model) {
		logger.info("HelloController hello()" +new Date());
		return "hello"; //이동한다.
		
		}
		
	@RequestMapping(value="home.do", method = RequestMethod.GET)
	public String home() {
		logger.info("HelloController home()" +new Date());
		return "home"; //이동한다.
		
		}
	
	@ResponseBody
	@RequestMapping(value="alias.do", method=RequestMethod.GET, 
			produces = "application/String; charset=utf-8") //한글이 깨지지 않도록 설정
	public String alias(String alias) {
		logger.info("HelloController alias()" +new Date()); //콘솔창에 일시 출력
		System.out.println("alias:" +alias); // 콘솔창에 입력받은 별명 출력
		
		if(alias.equals("라이언")) { //이름에 라이언 입력했을시 good name
			return "good name";
		
		}
		return "normal name";         //다른 이름일시 normal name
	}
	
	@ResponseBody
	@RequestMapping(value="getlist.do", method=RequestMethod.GET) 
	public List<HumanDto> getlist(String msg){
		logger.info("HelloController getlist()" +new Date());
		System.out.println("msg:"+msg); //콘솔창에 msg출력 ajax 에서 msg는 hj였다.
		List<HumanDto> list = new ArrayList<>();
		list.add(new HumanDto("gamer",18));
		list.add(new HumanDto("programmer",24));
		list.add(new HumanDto("baseballman",27));
			
		return list;
	}
	
	

}

<RequestMapping시 객체 생성을 위한 HumanDto.java 코드>

package multi.camp.a.dto;

public class HumanDto {
	
	private String job;
	private int age;
	public String getJob() {
		return job;
	}
	public void setJob(String job) {
		this.job = job;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	@Override
	public String toString() {
		return "HumanDto [job=" + job + ", age=" + age + "]";
	}
	public HumanDto(String job, int age) {
		super();
		this.job = job;
		this.age = age;
	}

}

 

'코딩 기록 > Spring' 카테고리의 다른 글

Jnit test시 java.lang.llegalStateException 오류 났을 때 해결 방법  (0) 2022.06.01
Spring Frame Work 와 SQL data 연결, SQL 데이터 회원가입 페이지랑 연동시켜 중복 조회, 회원가입으로 데이터 추가, 게시판 만들어 연결하기  (0) 2022.01.06
SQL 의 BD 불러와서 페이지랑 연결하기 (Spring Frame Work), 웹 페이지에 SQL 데이터 List, String 형태로 형변환하고 출력  (0) 2021.12.30
다음 페이지를 선택하는 웹페이지 Spring jsp파일로 구성하기 / 객체생성으로 배열 만들고 배열을 table로 만들어보기  (0) 2021.12.29
'코딩 기록/Spring' Related Articles more
Comments