[Spring] Ajax 사용하기

🔥 라이브러리 추가

<dependency>
    <groupId>org.codehaus.jackson</groupId>
    <artifactId>jackson-core-asl</artifactId>
    <version>1.9.12</version>
</dependency>
<dependency>
    <groupId>org.codehaus.jackson</groupId>
    <artifactId>jackson-mapper-asl</artifactId>
    <version>1.9.12</version>
</dependency>

🔥 형식

$.ajax({
	url: "경로",
  	type: "get" // or "post",
  	data: {'age':16, 'name':'Ariel'},
  	success:function(data) {
		alert('success');
	},
    error:function() {
    	alert('error');
    }
});

🔥 사용방법

🧾 jsp

<!-- send(String) recv(String) -->
id: <input type="text" id="checkid"><br>
<button type="button" onclick="idcheckBtn()">아이디 체크</button>

<!-- send(object) recv(list) -->
id: <input type="text" id="id" value="gdhong"><br>
pwd: <input type="text" id="pwd" value="1234"><br>
name: <input type="text" id="name" value="홍길동"><br>
email: <input type="text" id="email" value="gdhong@naver.com"><br>
<button type="button" id="account">회원가입</button>

🧾 jquery

function idcheck() {
	$.ajax({
    	url:"idcheck.do",
      	type:"get",
      	data:{'id': $("#checkid").val()},
      	success:function(){
        	alert(msg);
        },
      	error:function(){
        	alert("error");
        }
    });
}

$("#account").click(function () {
	// servlet-context.xml에 ajax 사용하기를 설정
	let member = {
			"id": $("#id").val(),
			"pwd": $("#pwd").val(),
			"name": $("#name").val(),
			"email": $("#email").val()
	};
	
	$.ajax({
		url:"account.do",
		type:"post",
		dataType:"json",
		data:member,
		async:true,
		success:function(list){
			// alert('success');
			// alert(JSON.stringify(list));
			
			alert(list[3].name);	// 홍길동
		},
		error:function() {
			alert('error');
		}
	});
});

🧾 servlet-context

<!-- Ajax 사용하기 -->
<mvc:annotation-driven />

<!-- spring에서 처리할 수 없는 요청은 tomcat이 처리 -->
<mvc:default-servlet-handler />

🧾 controller

@ResponseBody : ajax 통신을 의미
produces = "application/String; charset=utf-8" : String일 때 붙여줄 것(한글)

@ResponseBody
@RequestMapping(value="idcheck.do",
				method=RequestMethod.GET,
                produces="application/String; charset=utf-8")
public String idcheck(String id) {
	String msg = "오케이";
    return msg;
}

@ResponseBody
@RequestMapping(value="account.do", method = RequestMethod.POST)
public List<MemberDto> account(MemberDto dto) {
  System.out.println(dto.toString());

  List<MemberDto> list = new ArrayList<>();
  list.add(new MemberDto("abc", "123", "abc", "aemail", 0));
  list.add(new MemberDto("bcd", "234", "bcd", "bemail", 0));
  list.add(new MemberDto("cde", "345", "cde", "cemail", 0));
  list.add(dto);

  return list;
}