[Spring] ajax로 페이지 refresh없이 출력하기

Spring

[Spring] ajax로 페이지 refresh없이 출력하기

곰태태 2020. 6. 18. 20:47

SMALL

DTO.java

DAO.java

axios랑 똑같다.

2020/06/18 - [코딩코딩/Spring] - [Spring] axios로 spring 구현

[Spring] axios로 spring 구현

gomtaetae.tistory.com

Oracle.java

package pack02;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class Oracle {
	
	 @RequestMapping("/t1")
	 public String test(){ 
		 return "DataForm"; 
		 }
	 
	
	@RequestMapping(value = "/t2")
	public String test2(Model m, 
			@RequestParam(value = "id") String id,
			@RequestParam(value = "pw") String pw,
			@RequestParam(value = "name") String name,
			@RequestParam(value = "age") String age
			){
		DAO dao = new DAO();
		dao.insert(id, pw, name, age);
		String list =dao.select();
		System.out.println(list);
		return list;
	}
	
	@RequestMapping("/t3")
	public String test3(Model m, 
			@RequestParam(value = "id") String id,
			@RequestParam(value = "pw") String pw,
			@RequestParam(value = "name") String name,
			@RequestParam(value = "age") String age
			){
		DAO dao = new DAO();
		dao.update(id, pw, name, age);
		String list =dao.select();
		System.out.println(list);
		return list;
	}
	
	@RequestMapping("/t4")
	public String test4(Model m, 
			@RequestParam(value = "id") String id,
			@RequestParam(value = "name") String name
			){
		DAO dao = new DAO();
		dao.delete(id, name);
		String list =dao.select();
		System.out.println(list);
		return list;
	}
	
	
}

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.util.*, java.text.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>



<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>메인 페이지</title>
</head>

<body>
	<%=new Date()%>
	<h2>관리페이지</h2>
	<a href="t1">회원 관리</a><br/><br/>
	
	<div id="list"></div>
	<button id="sendButton">전송</button>
	<script type="text/javascript">
	$(function(){
		$("#sendButton").click(function(){
		$.ajax({
			type : "POST", // 요청 타입
			url : "t1", // 요청 경로
			success : function(data) {				
				var dt = JSON.parse(data);
				var dt2 = "";
				console.log(dt);
				for(var i=0; i < dt.length; i++){
					dt2 += dt[i].id +" " + dt[i].pw+" " + dt[i].name+" " + dt[i].age;
					dt2 +="<br/>"
					}
						console.log(dt2);
						$("#list").html(dt2); //div에 받아온 값을 넣는다
					},
				})
				.done(function() { console.log("성공"); }) 
				.fail(function() { console.log("실패"); }) 
			})
		});
		</script>
	
	
</body>

DataForm.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>Insert title here</title>
</head>
<body>
	<h3>회원 추가</h3>
		<form id="insert" action="t2" method="post">
		<input type="text" name="id" placeholder="id입력" /><br/>
		<input type="password" name="pw" placeholder="pw입력" /><br/>
		<input type="text" name="name" placeholder="이름 입력" /><br/>
		<input type="text" name="age" placeholder="나이 입력" /><br/>
		<input type="submit" value="전송" />
		</form>
	
	
		<h3>회원 수정</h3>
		<form action="t3" method="post">
			<input type="text" name="id" placeholder="id입력" /><br/>
			<input type="password" name="pw" placeholder="pw입력" /><br/>
			<input type="text" name="name" placeholder="바꿀이름 입력" /><br/>
			<input type="text" name="age" placeholder="바꿀나이 입력" /><br/>
			<input type="submit" value="전송" />
		</form>
		
		
		<h3>회원 삭제</h3>
		<form action="t4" method="post">
			<input type="text" name="id" placeholder="id입력" /><br/>
			<input type="text" name="name" placeholder="지울이름 입력" /><br/>
			<input type="submit" value="전송" />
		</form>
		
		<a href="<c:url value='index.jsp' />">Home</a>
	</body>
</html>

LIST