21.04.14 TIL (D+65 Spring, ajax)

view에서 controller로 데이터 보내기

 

1. 컨트롤러에서 JSP로 데이터 가져오기

 

view

스크립틀릿과 el태그 사용 가능.

<%
	MyClass cls = (MyClass)request.getAttribute("mycls");
%>
번호 : <%=cls.getNumber() %> <br>
이름 : <%=cls.getName() %> <br>
<br>
number : ${mycls.number } <br>
name : ${mycls.name } <br>

 

controller

model을 사용하여 데이터 전달

@RequestMapping(value = "hello.do", method = RequestMethod.GET)
public String hello(Model model) {
	logger.info("HelloController hello() " + new Date());

	MyClass cls = new MyClass(1001, "홍길동");
	model.addAttribute("mycls", cls);

	return "hello";
}

---

2. form 태그를 사용하여 post 방식 전달

 

view

<form action="move.do" method="post">
	번호:<input type="text" name="number"><br>
	이름:<input type="text" name="name"><br><br>
	<input type="submit" value="이동"><br>
</form>

 

controller

 

*** get방식과 post방식을 모두 받으려면 method 부분에 둘 다 기입한다.

@RequestMapping(value = "move.do", method = { RequestMethod.GET, RequestMethod.POST })
		//method = { RequestMethod.GET, RequestMethod.POST } : get방식과 post방식을 모두 받는다	public String move(Model model, MyClass mycls) {
	logger.info("HelloController move() " + new Date());
	System.out.println(mycls.toString());
	model.addAttribute("mycls", mycls);
	
	return "hello";
}

---

3. AJax를 사용한 비동기 처리

 

view

아이디:<input type="text" id="checkid"><br>

<button type="button" onclick="idcheck()">아이디체크</button>

<script type="text/javascript">
	function idcheck() {
		$.ajax ({
			url:"idcheck.do",
			type:"get",
		//	data:"id=" + $('#checkid').val(),  이렇게도 쓸 수 있지만 아래와 같은 JSON 형식이 편하다.
			data:{
				id:$('#checkid').val()
			},
			success:function(data) {
				//alert('success');
				alert(data); // '오케이' 넘어온다.
				
			},
			error:function(){
				alert('error');
			}
		});
	}
</script>

 

 

controller

return값을 view 이름으로 사용했었다면, ajax 사용시에는 데이터값을 넘겨줘야 하므로

@ResponseBody라는 어노테이션을 추가해준다.

만약 한글로 된 데이터를 넘겨준다면 @RequestMapping 프로퍼티에

produces = "application/String; charset=utf-8"를 추가한다.

@ResponseBody	// Ajax 사용시에 반드시 붙여주는 어노테이션
@RequestMapping(value = "idcheck.do", method = { RequestMethod.GET, RequestMethod.POST }, produces = "application/String; charset=utf-8")
			//produces = "application/String; charset=utf-8" : utf-8 형식으로 보낸다. (한글 깨짐 방지)
public String idcheck(String id) {
	logger.info("HelloController idcheck() " + new Date());
	System.out.println("id : " + id);
	
	String str = "오케이";
	
	return str; // Ajax의 리턴값은 페이지 이동이 아니다.
}

---

4. AJax + JSON (map 형식) 

 

view

입력 받은 데이터를 JSON 형식으로 만든다. ( human)

컨트롤러에서 받은 HashMap값을 JSON.stringify()를 사용하여 String으로 변환한다.

이름:<input type="text" id="name" value="홍길동"><br>
전화:<input type="text" id="phone" value="123-4567"><br>
이메일:<input type="text" id="email" value="egf@naver.com"><br>
생년월일:<input type="text" id="birth" value="2001/02/03"><br>
<button type="button" id="account">회원가입</button>
<br>
<br>
<script type="text/javascript">
	$('#account').click(function() {
		//alert('click');
		let human = {
				name:$('#name').val(),
				phone:$('#phone').val(),
				email:$('#email').val(),
				birth:$('#birth').val()
		}; // JSON 형식으로 받아줌
		
		$.ajax({
			url:"./account.do",
			type:"post",
			dataType:'json',
			data:human,
			async:true,
			success:function(data){
				alert(JSON.stringify(data));	//map 형식을 JSON 형식으로 받아온다.
			},
			error:function(){
				alert('error');
			}
		});
	})
</script>

 

controller

view에서 넘겨온 JSON 키 값과 Human(dto)의 변수이름이 일치하면,

매개변수를 dto로 받아보면 바로 값이 들어간다. (잘 알아두자)

HashMap의 형식도 key:value 이기 때문에 HashMap을 사용하여 컨트롤러에서도 JSON 형식으로 보낼 수 있다.

 

@ResponseBody
@RequestMapping(value = "account.do", method = { RequestMethod.GET, RequestMethod.POST })
public Map<String, Object> account(Human h) {
	logger.info("HelloController account() " + new Date());
	System.out.println(h.toString());
		
	Map<String, Object> map = new HashMap<String, Object>();
	map.put("message", "내가 보낸 메시지입니다.");
	map.put("name", "성춘향");
		
	return map;
}

 

 

Human.java (DTO)

package bit.com.a.dto;

import java.io.Serializable;

public class Human implements Serializable{

	private String name;
	private String phone;
	private String email;
	private String birth;
	
	public Human() {
		// TODO Auto-generated constructor stub
	}

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

	public String getName() {
		return name;
	}

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

	public String getPhone() {
		return phone;
	}

	public void setPhone(String phone) {
		this.phone = phone;
	}

	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 + ", phone=" + phone + ", email=" + email + ", birth=" + birth + "]";
	}
	
	
}

 

---

 

5. Ajax + JSON (list 형식)

 

 

view 

list형식도 JSON으로 가져올 수 있는데, $.each()를 사용하여 모든 데이터에 접근하거나,

data[1].name과 같이 배열 방식으로 데이터를 접근할 수 있다.

<div id="datas">
</div>
<button type="button" onclick="read()">data read</button>

<script type="text/javascript">
function read() {
	$.ajax({
		url:"read.do",
		type:"get",
		success:function(data){
			//alert(JSON.stringify(data));
			//$('#datas').text(JSON.stringify(data));	//DTO형식 list를 JSON형식으로 받아온다.
			//alert(data[1].name);
			let str = '';
			$.each(data, function (i, item) {
				str += (i+1) + " ";
				str += item.number +" ";
				str += item.name +"<br>";
			});
			$('#datas').html(str);
		},
		error:function(){
			alert('error');
		}
	});
}
</script>

 

 

controller

@ResponseBody
@RequestMapping(value = "read.do", method = { RequestMethod.GET, RequestMethod.POST })
public List<MyClass> read() {
	logger.info("HelloController read() " + new Date());
		
	//List<String> list = new ArrayList<String>();		
	//list.add("하나");
	//list.add("둘");
		
	List<MyClass> list = new ArrayList<MyClass>();		
	list.add(new MyClass(123,"홍길동"));
	list.add(new MyClass(456,"일지매"));
		
	return list;
}