Web Spring Ajax

ajax 스프링에서 구현

ajax 구현시 필요한 라이브러리 pom.xml에서 다운

 <dependencies>
  	<dependency>
	    <groupId>org.springframework</groupId>
	    <artifactId>spring-webmvc</artifactId>
	    <version>5.2.7.RELEASE</version>
	</dependency>
  	<dependency>
	    <groupId>log4j</groupId>
	    <artifactId>log4j</artifactId>
	    <version>1.2.17</version>
	</dependency>
  	<dependency>
	    <groupId>org.slf4j</groupId>
	    <artifactId>slf4j-simple</artifactId>
	    <version>1.7.25</version>
	</dependency>
	
		<!-- Java용 json 라이브러리(XML/YAM/CSV) data-processing 툴  스프링버전에 맡게 해야한다-->
  	<dependency>
	    <groupId>com.fasterxml.jackson.core</groupId>
	    <artifactId>jackson-core</artifactId>
	    <version>2.10.1</version>
	</dependency>
	
	<dependency>
	    <groupId>com.fasterxml.jackson.core</groupId>
	    <artifactId>jackson-databind</artifactId>
	    <version>2.10.1</version>
	</dependency>
  </dependencies>

web.xml은 디비가 없는 경우이기 때문에 servlet-context.xml 경로만 잡아주기만하면 된다.

그리고 servlet-context.xml은 views와 확장자설정 잘해주면 된다. (공통 패키지도 설정)

Ajax는 비동기 통신이기 때문에 view와 controller의 통신이 중요하다

1. controller

package bit.com.a;

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

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

import bit.com.a.dto.Human;
import bit.com.a.dto.MyClass;

@Controller
public class HelloController {
	private static Logger logger = LoggerFactory.getLogger(HelloController.class);
	
	//1번 객체 단순 
	@RequestMapping(value = "hello.do", method = RequestMethod.GET)
	public String hello(Model model) {
		logger.info("hello" + new Date());
		
		MyClass cls = new MyClass(1001, "홍길동");
		model.addAttribute("mycls",cls);
		
		return "hello";
	}
	//2번
	@RequestMapping(value = "move.do", method = RequestMethod.GET)
	public String move() {
		logger.info("move" + new Date());
		
		return "redirect:/hello.do";  // == sendRedirect 컨트롤로 이동가능 그냥 "hello.do"를 또사용하면 컨트럴에서 컨트럴은 못간다
	//	return "forward:/hello.do";//forward 값을 가지고 이동 가능
	}
	
	
	//3번
	
	@ResponseBody  // ajax사용시 반드시 추가 (이동하는게 아니라 데이터만 넘겨주는거다)
	@RequestMapping(value = "idcheck.do", method = RequestMethod.GET, produces = "application/String;charset=utf-8")
	public String idcheck(String id) {
		logger.info("idcheck" + new Date());
		logger.info("id:" + id);
		
		String str = "오케이";
		return str;
	}
	
	//4번  파라미터로 받을때 객체로 설정하게되면 받은 값들로 객체를 자동생성하게된다.
	@ResponseBody
	@RequestMapping(value = "account.do", method = RequestMethod.POST)
	public Map<String, Object> account(Human my){
		logger.info("account" + new Date());
		logger.info(my.toString());
		
		//DB 접근 위치
		
		Map<String , Object> map = new HashMap<String, Object>();
		map.put("message", "내가 보낸 메세지 입니다.");
		map.put("name", my.getName());
		
		
		return map; // map으로 여러개의 값들을 넘겨줄 
	}
	
	//5번
	@ResponseBody
	@RequestMapping(value = "updateUser.do", method = RequestMethod.POST)
	public Map<String, Object> updateUser(@RequestBody Map<String, Object> map){	//@RequestBody를 붙여줘야 map으로 받아들일 수 있다
		logger.info("updateUser"+ new Date());
		logger.info(map.get("name")+"");		//object로 넘어와서 문자열로 만들어줘야한다.
		logger.info(map.get("tel")+"");
		logger.info(map.get("email")+"");
		logger.info(map.get("birth")+"");
		
		
		Map<String , Object> rmap = map;
		rmap.put("message", "내가 보낸 메세지 입니다.");
		rmap.put("name", map.get("name"));
		
		
		return rmap;
	}
	
	//연습
	@ResponseBody
	@RequestMapping(value = "test.do", method = RequestMethod.POST)
	public List<MyClass> test(MyClass cls){
		logger.info("test"+new Date());
		logger.info(cls.toString());
		
		List<MyClass> list = new ArrayList<MyClass>();
		list.add(new MyClass(1, "홍길동"));
		list.add(new MyClass(2, "일지매"));
		list.add(new MyClass(3, "성춘향"));
		list.add(new MyClass(cls.getNumber(), cls.getName()));
		return list;
	}
}

2. view

<%@page import="bit.com.a.dto.MyClass"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<h2>hello</h2>

<!-- 1 -->
<%
	MyClass cls = (MyClass)request.getAttribute("mycls");
%>
number:<%=cls.getNumber() %><br>
name:<%=cls.getName() %><br>


<br>
<!-- EL tag -->
number: ${mycls.number }<br>
name: ${mycls.name }<br>
<br>

<!-- 2 -->

<form action="move.do">
	<input type="submit" value="move">
</form>
<br><br>

<!-- 3 -->

아이디: <input type="text" id="checkid"><br>
<br>
<button type="button" id="_check" onclick="idcheck()">id check</button>

<script type="text/javascript">
function idcheck(){
	$.ajax({
		url:"./idcheck.do",
		type:"get",
		//data:"id="+$("#checkid").val(),
		data:{id:$("#checkid").val()},
		success:function(data){
			//alert('success');
			alert(data);
		},
		error:function(){
			alert('error');

		}
	});
	
}

</script>
<br><br><br>

<!-- 4 -->
<!-- 
		json(view) -> Object(controller)
		Map(controller) -> json(view)
 -->
이름: <input type="text" id="_name" value="홍길동"><br>
전화: <input type="text" id="_phone" value="123-456"><br>
이메일: <input type="text" id="_email" value="hgd@naver.com"><br>
생년월일: <input type="text" id="_birth" value="2001/11/23"><br>
<button type="button" id="account">회원가입</button>


<script type="text/javascript">
$("#account").click(function(){
	//alert('account');

	// web(json) -> Controller(Dto로 받을 수 있다)
	// Controller(map) -> web(json)
// 아래 json 형식으로 값들을 
	let human = {
				name:$("#_name").val(),
				tel:$("#_phone").val(),
				email:$("#_email").val(),
				birth:$("#_birth").val()
			};
	$.ajax({

		url:"./account.do",
		type:"post",
		dataType:"json",
		data:human,
		async:true,
		success:function(resp){
			//alert('success');
			alert(resp.message);
			alert(resp.name);
		},
		error:function(){
			alert("error");
		}	
	});
});

</script>

<!-- 5 -->
<!-- 
	json(view) -> Map(controller)
 -->
<br><br>
이름: <input type="text" id="name1" value="일지매"><br>
전화: <input type="text" id="phone1" value="3444-234"><br>
이메일: <input type="text" id="email1" value="lgm@naver.com"><br>
생년월일: <input type="text" id="birth1" value="2012-06-23"><br>
<button type="button" id="account1">회원가입</button>


<script type="text/javascript">
$("#account1").on("click",function(){
	//alert('account1');
	let data = {};
//data안에 json형식으로 변환하여 넣어준다.
	data["name"] = $("#name1").val();
	data['tel'] = $("#phone1").val();
	data['email'] = $("#email1").val();

	let birth = $("#birth1").val();
	data["birth"] = birth.replace(/-/g,"");			//2012-06-23  -> 20120623   해당 방식을 잘 기억하자 "-"를 없애준다
	//alert(data["birth"]);

	$.ajax({
		url:"updateUser.do",
		type:"post",
		datatype:"json",
		data:JSON.stringify(data),			//json -> String 변환   그래야 컨트럴에서 map으로 받음 :(stringify  <-> parse)
		contentType:"application/json",   //map변환시 
		success:function(resp){
			//alert('success');
			alert(resp.name);
		},
		error:function(){
			alert('error');
		}
	});
	
});

</script>


<!-- 연습 -->

<!-- 
입력: number, name (web)
json-> controller (list) 3개 담기 -> web확인 

 -->
<br><br>
숫자: <input type="text" id="num"><br>
이름: <input type="text" id="name"><br>

<button type="button" id= "btn">전송</button>

<script type="text/javascript">
$("#btn").click(function(){
	let test = {
			number:$("#num").val(),
			name:$("#name").val()

			};

	$.ajax({

		url:"./test.do",
		type:"post",
		data:test,
		datatype:"json",
		async:true,
		success:function(data){
			//alert(data);
			alert(JSON.stringify(data));
			$.each(data, function(i,val){
				$("#btn").after(val.number+"<br>"+val.name+"<br>")
			});
		},
		error:function(){

		}	
	});
	
});

</script>
</body>
</html>

ajax 예제에 사용했던 Human 객체와 Myclass 객체이다

  • Human
package bit.com.a.dto;

import java.io.Serializable;

public class Human implements Serializable {

	private String name;
	private String tel;
	private String email;
	private String birth;
	
	public Human() {
	}

	public Human(String name, String tel, String email, String birth) {
		super();
		this.name = name;
		this.tel = tel;
		this.email = email;
		this.birth = birth;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getTel() {
		return tel;
	}

	public void setTel(String tel) {
		this.tel = tel;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

	public String getBirth() {
		return birth;
	}

	public void setBirth(String birth) {
		this.birth = birth;
	}

	@Override
	public String toString() {
		return "Human [name=" + name + ", tel=" + tel + ", email=" + email + ", birth=" + birth + "]";
	}
}
  • Myclass
package bit.com.a.dto;

import java.io.Serializable;

public class MyClass implements Serializable {

	private int number;
	private String name;
	
	public MyClass() {
	}

	public MyClass(int number, String name) {
		super();
		this.number = number;
		this.name = name;
	}

	public int getNumber() {
		return number;
	}

	public void setNumber(int number) {
		this.number = number;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	@Override
	public String toString() {
		return "MyClass [number=" + number + ", name=" + name + "]";
	}
}