2023. 3. 22. 10:33ใSpring
**์ฐธ๊ณ ์ฌํญ : Ajax ์ฝ๋ ์คํ ์์
์ผ๋ฐ์ ์ธ ์ฝ๋๋ ์์ฑ๋ ์์๋๋ก ์คํ๋จ.
ajax๋ ๋จ๋ ์ ์ผ๋ก ํด์๋จ.
์๋ฅผ ๋ค์ด ์๋์ฒ๋ผ ์ผ๋ฐ์ ์ธ ์ฝ๋์ ajax์ฝ๋๊ฐ ๊ฐ์ด ์๋ ๊ฒฝ์ฐ
1
2
3 - ajax
3-1
4
5
์ผ๋ฐ์ ์ธ ์ฝ๋๋ 1,2,4,5๋ฅผ ํด์ํ๊ณ ajax์ธ 3, 3-1์ ๋ฐ๋ก ๋จ๋ ์ ์ผ๋ก ํด์ํ๊ธฐ ๋๋ฌธ์
์์๊ฐ 1 2 3 3-1 4 5 ์์ผ๋ก ๋์ค์ง ์์
์ด๋ค ๊ฒ์ด ๋จผ์ ํด์๋ ์ง ๋ชจ๋ฅด๋ ์ํ๊ฐ ๋๋ ๊ฒ!
> ์์๋๋ก ๋์ฌ ์ ์๊ฒ ๋ณ๋๋ก ์ ์๋ฅผ ํด์ผ ํจ
> async๋ฅผ false๋ก ์ค์ ๋๊ธฐ ๋ฐฉ์์ผ๋ก ์คํํด์ผ ํจ.
//ajax start
$.ajax({
url: '/admin/checkCateName', //์์ฒญ๊ฒฝ๋ก
type: 'post',
async : false, //๋๊ธฐ ๋ฐฉ์์ผ๋ก ์คํ, ์์ฑํ์ง ์์ผ๋ฉด ๊ธฐ๋ณธ์ผ๋ก true
data: {'cateName' : cateName}, //ํ์ํ ๋ฐ์ดํฐ
success: function(result) {
//result == 1 : ์นดํ
๊ณ ๋ฆฌ๋ช
์ค๋ณต
if(result == 1) {
return false;
}
else{
return true;
}
},
error: function() {
alert('์คํจ');
}
});
//ajax end
}
Jquery ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ถ๊ฐํ์ฌ ajax ์ฌ์ฉ
Jquery ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ถ๊ฐํ๋ ค๋ฉด script์ ์๋ ์ฝ๋ ์ถ๊ฐ ํ์
**Jquery ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ก๋ฉ ์ฝ๋๋ ๋ค๋ฅธ script ์ฝ๋๋ณด๋ค ํญ์ ์์ ์์ด์ผ ํจ!
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
์์ ์ ์ฌ์ฉํ html ์์ฑ ๋ฐ ์ค์ ๋ก ajax ๊ธฐ๋ฅ ์์ฑํ script ํ๊ทธ ์ฝ๋๋ ์ถ๊ฐํ์ฌ html๊ณผ ์ฐ๊ฒฐ
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 id="title">Jquery Ajax ์์ </h1>
<div>
<ul>
<li>Ajax ํต์ ์ ์ํด์ Jquery ๋ง์ด ์ฌ์ฉํ๋ค.</li>
<li>Jquery๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ด๋ ค์ด ๋ฌธ๋ฒ์ ์ฝ๊ฒ ์ฌ์ฉํ๋๋ก ๋ง๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ</li>
<li>๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ถ๊ฐ ๋ฐฉ๋ฒ์ body ํ๊ทธ ๋๋๊ธฐ ์ ์๋์ script๋ฅผ ์ถ๊ฐํ๋ค.</li>
</ul>
</div>
<div>
<h3>Ajax ์คํ ํ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ด๋ ๋ฐฉ๋ฒ(Controller > js๋ก ๋ฐ์ดํฐ ๋ณด๋)</h3>
<input type="button" value="๊ธฐ๋ณธ ์๋ฃํ ๋ฐ์ดํฐ ๋ฐ๊ธฐ" onclick="test1();">
<input type="button" value="ํด๋์ค ๊ฐ์ฒด ๋ฐ์ดํฐ ๋ฐ๊ธฐ" onclick="test2();">
<input type="button" value="๋ฆฌ์คํธ ๋ฐ์ดํฐ ๋ฐ๊ธฐ" onclick="test3();">
</div>
<div>
<h3>Controller๋ก ์ด๋ ์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ๊ฐ๋ ๋ฐฉ๋ฒ</h3>
<input type="button" value="๊ธฐ๋ณธ ์๋ฃํ์ผ๋ก ๋ฐ์ดํฐ ๋ฐ๊ธฐ" onclick="test4();">
<input type="button" value="์ปค๋งจ๋ ๊ฐ์ฒด๋ก ๋ฐ์ดํฐ ๋ฐ๊ธฐ" onclick="test5();">
</div>
<!-- Jquery ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ก๋ฉ ์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ ์์ ์ฒ์์! --> <!-- ์คํฌ๋ฆฝํธ ์๋์ ๊ฐ์ด ์ฌ๋ฌ๊ฐ ์ฐ๊ฒฐ ๊ฐ๋ฅ -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="/jquery_ajax.js"></script>
</body>
</html>
ajax ์คํํ์ฌ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฐ์ดํฐ ๋ณด๋ด๊ธฐ
์์ 1. ๊ธฐ๋ณธ ์๋ฃํ ๋ฐ์ดํฐ ๋ฐ๊ธฐ
//๊ธฐ๋ณธ ์๋ฃํ ๋ฐ์ดํฐ ๋ฐ๊ธฐ
function test1(){
//ajax start
$.ajax({
url: '/test2/test2', //์์ฒญ๊ฒฝ๋ก(Controller ๊ฒฝ๋ก)
type: 'post',
data: {}, //๊ฐ์ ธ๊ฐ๊ณ ์ถ์ ํ์ํ ๋ฐ์ดํฐ {}์์
//์ ์ฝ๋์์ Controller๋ก ์ด๋, ๋์ ํ js๋ก ๋์์์ ์๋ ์ฝ๋ ์คํ
success: function(result) {
alert('ajax ํต์ ์ฑ๊ณต');
alert(result); //result : Controller์์ returnํ ๋ฐ์ดํฐ ๋ฐ์์ด.
},
error: function() {
alert('์คํจ');
}
});
//ajax end
}
์์ 1. Controller
@Controller
@RequestMapping("/test2")
public class AjaxController {
@GetMapping("/test1")
public String testMain() {
return "jquery_ajax";
}
//๊ธฐ๋ณธ ์๋ฃํ ๋ฐ์ดํฐ ๋ฐ๊ธฐ
@ResponseBody
@PostMapping("/test2")
public String test2() {
System.out.println("test2 ๋ฉ์๋ ์คํ");
return "hello"; //ํ์ด์ง ์ด๋X Controller ๋์ ํ
//java์์ js๋ก ๋ฐ์ดํฐ ๋์ ธ์ค ๋ return์ ๋ฃ์ด์ค. js์์ result๊ฐ ๋ฐ์ดํฐ ๋ฐ์
}
์์ 2. ํด๋์ค ๊ฐ์ฒด ๋ฐ์ดํฐ ๋ฐ๊ธฐ
//ํด๋์ค ๊ฐ์ฒด ๋ฐ์ดํฐ ๋ฐ๊ธฐ
function test2(){
//ajax start
$.ajax({
url: '/test2/test3', //์์ฒญ๊ฒฝ๋ก(Controller ๊ฒฝ๋ก)
type: 'post',
data: {}, //๊ฐ์ ธ๊ฐ๊ณ ์ถ์ ํ์ํ ๋ฐ์ดํฐ {}์์
//์ ์ฝ๋์์ Controller๋ก ์ด๋, ๋์ ํ js๋ก ๋์์์ ์๋ ์ฝ๋ ์คํ
success: function(result) {
alert('ajax ํต์ ์ฑ๊ณต');
console.log(result); //Controller์์ return์ผ๋ก ๋์ง ๊ฐ์ฒด vo๋ฅผ result๊ฐ ๋ฐ์์ด
console.log(`์ด๋ฆ = ${result.stuName}`) //vo์ ๋ฐ์ดํฐ ๋ฝ๊ธฐ ๊ฐ๋ฅ
},
error: function() {
alert('์คํจ');
}
});
//ajax end
}
์์ 2. Controller
//๊ฐ์ฒด ๋ฐ์ดํฐ ๋ฐ๊ธฐ
@ResponseBody
@PostMapping("/test3")
public StudentVO test3() {
System.out.println("test3 ๋ฉ์๋ ์คํ");
StudentVO vo = new StudentVO();
vo.setStuNum(1);
vo.setStuName("ํ๊ธธ๋");
vo.setStuAge(30);
return vo; //๊ฐ์ฒด vo๋ฅผ return
}
์์ 3. ๋ฆฌ์คํธ ๋ฐ์ดํฐ ๋ฐ๊ธฐ
//๋ฆฌ์คํธ ๋ฐ์ดํฐ ๋ฐ๊ธฐ
function test3(){
//ajax start
$.ajax({
url: '/test2/test4', //์์ฒญ๊ฒฝ๋ก(Controller ๊ฒฝ๋ก)
type: 'post',
data: {}, //๊ฐ์ ธ๊ฐ๊ณ ์ถ์ ํ์ํ ๋ฐ์ดํฐ {}์์
//์ ์ฝ๋์์ Controller๋ก ์ด๋, ๋์ ํ js๋ก ๋์์์ ์๋ ์ฝ๋ ์คํ
success: function(result) {
alert('ajax ํต์ ์ฑ๊ณต');
console.log(result); //StudentVO list ๋ฐ์ดํฐ ๋ค์ด๊ฐ ์์
for(const stu of result){
console.log(`์ด๋ฆ = ${stu.stuName}`); //list ๋ฐ์ดํฐ ๋ฝ๊ธฐ ๊ฐ๋ฅ
}
},
error: function() {
alert('์คํจ');
}
});
//ajax end
}
์์ 3. Controller
//๋ฆฌ์คํธ ๋ฐ์ดํฐ ๋ฐ๊ธฐ
@ResponseBody
@PostMapping("/test4")
public List<StudentVO> test4() {
System.out.println("test4 ๋ฉ์๋ ์คํ");
List<StudentVO> list = new ArrayList<>();
for(int i = 0 ; i < 5 ; i++) {
StudentVO vo = new StudentVO();
vo.setStuNum(i + 1);
vo.setStuName("์๋ฐ_" + i+1);
vo.setStuAge(10 * (i + 1));
vo.setClassCode("CLASS_001");
list.add(vo);
}
return list; //StudentVO๊ฐ ์ฌ๋ฌ๊ฐ ์๋ list return
}
ajax ์คํํ์ฌ js์์ Controller ์ด๋ ์ ๋ฐ์ดํฐ ๊ฐ์ ธ๊ฐ๊ธฐ
์์ 1. ๊ธฐ๋ณธ ์๋ฃํ ๋ฐ์ดํฐ ๊ฐ์ ธ๊ฐ๊ธฐ
data์ ๊ฐ์ ธ๊ฐ๊ณ ์ถ์ ๋ฐ์ดํฐ ๋ฃ์ด์ฃผ๋ฉด ๋จ.
//Controller์ ๊ธฐ๋ณธ ์๋ฃํ ๋ฐ์ดํฐ ๋ณด๋ด๊ธฐ
function test4(){
//ajax start
$.ajax({
url: '/test2/test5', //์์ฒญ๊ฒฝ๋ก(Controller ๊ฒฝ๋ก)
type: 'post',
data: {'name' : 'java', 'age' : 20}, //๊ฐ์ ธ๊ฐ๊ณ ์ถ์ ํ์ํ ๋ฐ์ดํฐ {}์์ (์ฌ๋ฌ๊ฐ์ผ ๊ฒฝ์ฐ ,๋ก ์ด์ด์ค )
//์ ์ฝ๋์์ Controller๋ก ์ด๋, ๋์ ํ js๋ก ๋์์์ ์๋ ์ฝ๋ ์คํ
success: function(result) {
alert('ajax ํต์ ์ฑ๊ณต');
},
error: function() {
alert('์คํจ');
}
});
//ajax end
}
์์ 1. Controller
//js์์ Controller๋ก ๋ณด๋ธ ๋ฐ์ดํฐ ๋ฐ๊ธฐ(๊ธฐ๋ณธ ์๋ฃํ)
@ResponseBody
@PostMapping("/test5")
//js์์ ๋์ด์ค๋ ๋ฐ์ดํฐ์ ์ด๋ฆ = Controller์ ๋งค๊ฐ๋ณ์ ๋ง์ถฐ์ฃผ๋ฉด ์๋์ผ๋ก ๋ฐ์์ง๋ค.
public void test5(String name, int age) {
System.out.println("test5 ๋ฉ์๋ ์คํ");
System.out.println(name);
System.out.println(age);
}
์์ 2. ์ปค๋งจ๋ ๊ฐ์ฒด ๊ฐ์ ธ๊ฐ๊ธฐ
'Spring' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
์ผํ๋ชฐ ํ๋ก์ ํธ(1) - ์ ๋ฐ์ ์ธ ํ ์ก๊ธฐ (0) | 2023.03.23 |
---|---|
ajax ์ฐ์ต ํ๋ก์ ํธ (0) | 2023.03.22 |
ajax(๋น๋๊ธฐ ํต์ ) (0) | 2023.03.21 |
๊ฒ์ํ ํ๋ก์ ํธ - ๋๊ธ ๋ฑ๋ก ๋ฐ ์กฐํ (0) | 2023.03.20 |
๊ฒ์๊ธ ํ์ด์ง ์ฒ๋ฆฌ (0) | 2023.03.20 |