ํ์๊ฐ์ ํผ (jsp ํ์ผ)์์ ๋ฐ์ดํฐ๋ฅผ ์ ์กํด์ผ ํ๋ค.
<form action="/user/join" method="POST">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" placeholder="Enter username" id="username">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" placeholder="Enter password" id="password">
</div>
<button type="submit" class="btn btn-primary">ํ์๊ฐ์
ํ๊ธฐ</button>
</form>
์ ๋ฒ ํ๋ก์ ํธ๋ form ํ๊ทธ๋ฅผ ์ด์ฉํ์ฌ ์์ฒ๋ผ ํ์๋ค๋ฉด.. ์ด๋ฒ์๋ ์ข ๋ค๋ฅด๊ฒ !!
json ํํ๋ก ํด๋ณด๊ฒ ๋ค.
(์์)
์ด๋ ๊ฒ ํด๋ผ์ด์ธํธ๊ฐ ๋ธ๋ผ์ฐ์ ๋ผ๋ฉด ์์ ๊ทธ๋ฆผ์ด ๊ฐ๋ฅํ๋ค. (html)
๋ธ๋ผ์ฐ์ ๊ฐ ์๋ ์ฑ์ด๋ผ๋ฉด, ์ฑ์ html์ ์ดํดํ์ง ๋ชปํ๋ค.
์ ํํ ๋งํ๋ฉด ํ๋ฉด์ ๊ทธ๋ ค์ผ ํ๊ธฐ ๋๋ฌธ์ ์๋ฐ ์ฝ๋๋ฅผ ๋ฆฌํดํด์ผ ํ๋ค.
์ฑ์ ๋ค์ด๋ก๋ํ๋ฉด ํ๋ฉด ๋์์ธ์ ์ด๋ฏธ ์ฑ์ ์ฌ์ด์ ธ์๋ค.
์ฆ, Data๋ง ๋ฆฌํดํ๋ฉด ๋๋ค!
์ด๋ ๊ฒ ํด๋ผ์ด์ธํธ๊ฐ ๋ธ๋ผ์ฐ์ ์ผ๋์ ์ฑ ์ผ๋์ ๋ฐฉ์์ด ๋ค๋ฅด๋ค. ๊ทธ๋ฌ๋ฉด ์๋ฒ๋ฅผ 2๋ฒ ๋ง๋ค์ด์ผ ํ ๊น??
์ด๋ ๊ฒ
1. ํ์๊ฐ์
์์ฒญ ํ Data๋ก ๋ฆฌํด ๋ฐ๊ณ
2. ๋ฉ์ธ ํ์ด์ง๋ฅผ ๋ค์ ์์ฒญํ์ฌ .html๋ก ๋ฆฌํด ๋ฐ๋ ๊ฒ์ด๋ค.
์ ์ฐจ์ ์ผ๋ก ์ผ์ ์ฒ๋ฆฌํ๋๋ฐ ์์์ ์๊ด์์ด ์ฒ๋ฆฌํ๋ ๊ฒ
์ฝ๋ฐฑ : ํ๋ ์ผ์ ๋ฉ์ถ๊ณ ๋์๊ฐ๋ ๊ฒ
joinForm.jsp์
<button id="btn-save" class="btn btn-primary">ํ์๊ฐ์
ํ๊ธฐ</button>
.
.
.
<script src="/blog/js/user.js"></script>
๋ฃ์ด์ฃผ๊ณ ์ด์ user.js๋ฅผ ๋ง๋ค์ด์ผ ํ๋ค.
๋ฒํผ id๊ฐ btn-save์ด๋๊น .. ์๋์ฒ๋ผ !!
< user.js >
let index = {
init: function () {
$("#btn-save").on("click", ()=>{ // function(){} ๋์ ()=>{} ๋ฅผ ์ด ์ด์ : this๋ฅผ ๋ฐ์ธ๋ฉํ๊ธฐ ์ํด์
this.save();
});
},
save: function () {
// alert('user์ saveํจ์ ํธ์ถ๋จ');
let data = {
username: $("#username").val(),
password: $("#password").val(),
email: $("#email").val()
};
// console.log(data);
// ajax ํธ์ถ์ default๊ฐ ๋น๋๊ธฐ ํธ์ถ -> ์์ ์๊ด์์
// ajax ํต์ ์ ์ด์ฉํด์ 3๊ฐ์ ๋ฐ์ดํฐ๋ฅผ json์ผ๋ก ๋ณ๊ฒฝํ์ฌ insert ์์ฒญ
// ajax๊ฐ ํต์ ์ ์ฑ๊ณตํ๊ณ ์๋ฒ๊ฐ json์ ๋ฆฌํดํด์ฃผ๋ฉด ์๋์ผ๋ก ์๋ฐ ์ค๋ธ์ ํธ๋ก ๋ณํ
$.ajax({
// ํ์๊ฐ์
์ํ ์์ฒญ
type: "POST",
url: "/blog/api/user",
data: JSON.stringify(data), // http body ๋ฐ์ดํฐ
contentType: "application/json; charset=utf-8", // body ๋ฐ์ดํฐ๊ฐ ์ด๋ค ํ์
์ธ์ง (MIME)
dataType: "json" // ์์ฒญ์ ์๋ฒ๋ก ํด์ ์๋ต์ด ์์ ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ชจ๋ ๊ฒ์ด String(๋ฌธ์์ด), ๋ง์ฝ ์๊ธด๊ฒ json์ด๋ผ๋ฉด javascript ์ค๋ธ์ ํธ๋ก ๋ณ๊ฒฝ
}).done(function (resp) {
// ๊ฒฐ๊ณผ๊ฐ ์ ์์ด๋ฉด done ์คํ
alert("ํ์๊ฐ์
์ด ์๋ฃ๋์์ต๋๋ค.");
//console.log(resp);
location.href = "/blog";
}).fail(function (error) {
// ์คํจํ๋ฉด fail ์คํ
alert("ํ์๊ฐ์
์ด ์คํจํ์์ต๋๋ค.");
alert(JSON.stringify(error));
});
}
}
index.init();
ํ์๊ฐ์ ๋ฒํผ์ ๋๋ฅด๋ฉด ajax์์ ํ์๊ฐ์ ์ํ์์ฒญ์ ํ๋๋ฐ
url : url์ "/blog/api/user"๋ก ์ก์๋ค.
data : data์์๋ ์์ data๊ฐ ์๋ฐ์คํฌ๋ฆฝํธ ์ค๋ธ์ ํธ๋๊น (let data = { id:1, username:"ssar" }; ์ด๋ฐ ํํ๋ก ์๊น) ์๋ฐ์์ ์ดํด๋ฅผ ํ์ง ๋ชปํ๋ค. (data: data๋ผ๊ณ ์ ์ผ๋ฉด ์๋ฐ๊ฐ ์ดํด ๋ชปํจ)
๋ฐ๋ผ์ js์ค๋ธ์ ํธ๋ฅผ json์ผ๋ก ๋ณ๊ฒฝํด์ผ ํ๋ค. (JSON.stringify() ํจ์ ์ฌ์ฉ)
์ : console.log(data); -> ์๋ฐ์คํฌ๋ฆฝํธ ์ค๋ธ์ ํธ
์๋ : console.log(JSON.stringify(data); -> JSON ๋ฌธ์์ด
contentType : ๋ฌด์จ ๋ฐ์ดํฐ์ธ์ง ์๋ ค์ฃผ๊ธฐ (MIME ๋ฐ์ดํฐ), ์์ data์ ์ธํธ๋ก ์จ์ฃผ๊ธฐ
dataType : ์๋ต์ด ์จ ํ!!!๋ฅผ ๋งํจ. ์๋ต์ผ๋ก ์จ ๋ฐ์ดํฐ -> ํ
์คํธ, ์ซ์, json ํํ ๋ฑ..
๊ธฐ๋ณธ์ ์ผ๋ก ๋ชจ๋ ๊ฒ์ด ๋ฌธ์์ด๋ก ์ค์ง๋ง, "json"์ด๋ผ๊ณ ์ค์ ํ๋ฉด ์๋ต ์จ ๋ฐ์ดํฐ์ ์๊ธด ํํ๊ฐ json ์ผ ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ค๋ธ์ ํธ๋ก ๋ณ๊ฒฝ
-> ๊ฒฐ๊ณผ๋ฅผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ณํํด์ ์๋ต ๊ฒฐ๊ณผ๊ฐ ์๋์ function(๊ฒฐ๊ณผ)
์ฌ๊ธฐ ๊ฒฐ๊ณผ๋ก ์ ๋ฌ๋จ
< UserApiController >
@PostMapping("/api/user")
public ResponseDto<Integer> save(@RequestBody User user) {
System.out.println("UserApiController : save ํธ์ถ๋จ");
user.setRole(RoleType.USER);
userService.ํ์๊ฐ์
(user);
return new ResponseDto<Integer>(HttpStatus.OK.value(), 1); // ํต์ ์ฑ๊ณต : 200, ์คํจ : 500 // ์๋ฐ ์ค๋ธ์ ํธ๋ฅผ JSON์ผ๋ก ๋ณํํด์ ๋ฆฌํด (Jackson)
}
< UserService >
@Transactional // ์ ์ฒด๊ฐ ์ฑ๊ณตํด์ผ commit, ์คํจํ๋ฉด rollback
public void ํ์๊ฐ์
(User user) {
userRepository.save(user);
}
update, insert, delete ๋ฑ ์ฌ๋ฌ๊ฐ์ง ๋ก์ง์ด ๋ฌถ์ธ ๊ฒ, update ๋ผ๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค ๋ก์ง์ ํ๋๋ง ๋ค๊ณ ์์ด๋ ์๋น์ค๋ผ๊ณ ํ ์ ์๊ธด ํจ.
(์์) ์ก๊ธ ์๋น์ค : A(ํ์ฌ ์์ก : 5000) -> B(ํ์ฌ ์์ก : 2000) ์๊ฒ 1000์ ์
๊ธํ๋ฉด A์ ๋ฐ์ดํฐ 5000->4000์ผ๋ก update, B์ ๋ฐ์ดํฐ 2000->3000์ผ๋ก update. ์ด 2๊ฐ์ ๋ก์ง์ ๋ฌถ๋๋ค. ๋ํ 2๊ฐ ๋ก์ง์ ํธ๋์ญ์
์ ๋ฌถ์ด์ ํ๋์ ํธ๋์ญ์
์ผ๋ก ๋ฌถ์ด ์๋น์คํ ์ํจ๋ค.
์ฆ, ์ฌ๋ฌ ๊ฐ์ ํธ๋์ญ์
์ด ๋ชจ์ฌ ์๋น์ค๊ฐ ๋๋ค.