Ajax 문법
$.ajax({
url: "전송할 url", // 컨트롤러까지 도달할 매핑된 url
type: "post", // 전송 방식(get, post)
dataType: "json", // content-type이 json인 경우만 작성(그 외 생략)
data: dt,
success: function(result_data) {
// 전송(request)과 응답(response)이 성공하면 실행되는 부분
},
error: function(error) {
// 전송 또는 응답이 실패했을 때 실행되는 부분
}
});REST 방식
REST(REpresentational State Transfer) 방식은 비동기 통신 방식으로, uri(url)를 통해 자원(데이터)을 명시하고 method(get / post)를 사용하여 해당 자원의 CRUD를 적용한다. REST 전송을 jQuery에서 구현한 것이 Ajax이다.
Spring에서 REST 방식을 처리하는 Controller 설정)
- 일반 Controller에서는 해당 매핑 메소드에 @ResponseBody를 사용
- RestController 어노테이션 사용
=> REST 처리 메소의 return문에 작성하는 문자열은 View(Jsp)의 이름이 아닌 결과값이다.
serialize() 메소드)
jQuery에서 제공하는 직렬화 메소드로, form 태그 소속 input 태그의 name과 value를 직렬화해준다.
Dto와 연동되도록 각 input 태그의 name 속성의 값과 Dto 내 변수의 이름을 대소문자 포함 모두 동일하게 작성한다.
예제
- MemberDto.java
@Data
public class MemberDto {
private String m_id;
private String m_pwd;
private String m_name;
}
- home.jsp
<!-- body -->
<body>
<h2>일반 컨트롤러와 데이터 주고 받기</h2>
<p>ID : <input id="inId" type="text"
placeholder="아이디 입력하세요.">
<button id="idcheck">중복확인</button>
<button id="restcheck">중복확인(REST)</button></p>
<p>PWD : <input id="inPwd" type="password"
placeholder="비밀번호를 입력하세요."></p>
<p>NAME : <input id="inName" type="text"
placeholder="이름을 입력하세요."></p>
<p><button id="send1">가입1</button></p>
<hr>
<h2>다시 만든 가입 양식</h2>
<form id="joinFrm">
<p>ID : <input type="text" name="m_id"
placeholder="아이디 입력하세요."></p>
<p>PWD : <input type="password" name="m_pwd"
placeholder="비밀번호를 입력하세요."></p>
<p>NAME : <input type="text" name="m_name"
placeholder="이름을 입력하세요."></p>
<p><button type="button" id="send2">가입2</button></p>
</form>
</body>
<!-- script -->
<script>
$("#send2").click(function () {
//form 데이터를 가져와서 직렬화한 다음 전송.
const formData = $("#joinFrm").serialize();
//serialize() : 폼데이터 직렬화 함수.
console.log(formData);
$.ajax({
url: "joinProc",
type: "post",
data: formData,
success: function (result) {
alert(result);
},
error: function (error) {
alert("전송실패");
console.log(error);
}
});
});
$("#send1").click(function () {
let id = $("#inId").val();
let pwd = $("#inPwd").val();
let name = $("#inName").val();
let sData = {
"m_id": id,
"m_pwd": pwd,
"m_name": name
}
$.ajax({
url: "joinProc",
type: "post",
data: sData,
success: function (r) {
alert(r);
},
error: function (e) {
alert("전송실패");
console.log(e);
}
});
});
$("#idcheck").click(function (){
let idvalue = $("#inId").val();
let sendObj = {"data":idvalue};
//컨트롤러와 통신
$.ajax({
url: "idcheck",
type: "get",
data:sendObj,
success: function (result){
if(result == "ok"){
alert("사용 가능한 아이디입니다.");
}
else {
alert("사용 중인 아이디입니다.");
}
},
error: function (error) {
alert("전송 실패");
console.log(error);
}
});
});
$("#restcheck").click(function (){
let idval = $("#inId").val();
let sObj = {"idv": idval};
$.ajax({
url: "restcheck",
type: "post",
data: sObj,
success: function (result) {
alert(result);
},
error: function (error) {
alert("전송실패");
console.log(error);
}
});
});
</script>
- HomeController.java
@Controller
@Log
public class HomeController {
@GetMapping("/")
public String home(){
log.info("home()");
return "home";
}
@GetMapping("idcheck")
@ResponseBody
public String idcheck(String data){
log.info("idcheck()");
String res = "ok";//중복 확인 처리
return res;
}
}
- RestHomeController.java (Ajax 동작)
@RestController
@Log
public class RestHomeController {
@PostMapping("restcheck")
public String restcheck(String idv){
log.info("restcheck() - idv : " + idv);
String res = "사용 가능한 아이디입니다.";
return res;
}
@PostMapping("joinProc")
public String joinProc(MemberDto member){
log.info("joinProc() - id : " + member.getM_id());
log.info("joinProc() - pwd : " + member.getM_pwd());
log.info("joinProc() - name : " + member.getM_name());
return "가입 성공";
}
}'Spring' 카테고리의 다른 글
| Jpa_1강 (0) | 2022.11.17 |
|---|---|
| Jpa_0강 (0) | 2022.11.08 |
| Ajax_1강 (0) | 2022.11.08 |
| Thymeleaf_1강 (0) | 2022.11.07 |
| Thymeleaf_0강 (0) | 2022.11.06 |
