Ajax 2 (์ตœ๊ทผ ์—…๋ฐ์ดํŠธ ๋ฐฉ๋ฒ•)

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๊ฐ€ ๋ฐ์ดํ„ฐ ๋ฐ›์Œ
	}

๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ๋จผ์ € ํ†ต์‹  ์„ฑ๊ณต alert์ฐฝ ๋œธ
Controller์—์„œ return์œผ๋กœ ๋„˜๊ธด hello๋ฅผ js์—์„œ result๊ฐ’์œผ๋กœ ๋ฐ›์•„์˜ค๋Š” ๊ฒƒ ํ™•์ธ ๊ฐ€๋Šฅ
spring ์ฝ˜์†”์ฐฝ์—๋„ ๋ฉ”์†Œ๋“œ ์‹คํ–‰ ๋ฌธ๊ตฌ ์ถœ๋ ฅ

 

์˜ˆ์ œ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
	}

๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ๋จผ์ € ํ†ต์‹  ์„ฑ๊ณต alert์ฐฝ ๋œธ
๊ฐœ๋ฐœ์ž๋ชจ๋“œ๋กœ&nbsp; console์ฐฝ ๋ณด๋ฉด Controller์—์„œ return์œผ๋กœ ๋„˜๊ธด vo ๊ฐ์ฒด ๋ฐ›์•„์˜ด,&nbsp; js์—์„œ ๋ฐ›์€ ๊ฐ์ฒด vo์—์„œ ๋ฝ‘์€ stuName๋„ ์ž˜ ๋ฐ›์•„์˜ด

 

์˜ˆ์ œ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
	}

๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ๊ฐœ๋ฐœ์ž๋ชจ๋“œ console์ฐฝ์„ ๋ณด๋ฉด Controller์—์„œ return์œผ๋กœ ๋„˜๊ธด list ๋ฐ์ดํ„ฐ ๋ฐ›์•„์˜ด, js์—์„œ ๋ฐ›์€ list์—์„œ ๋ฝ‘์€ stuName๋„ ์ž˜ ๋ฐ›์•„์˜ด

 

 

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);
	}

๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ํ†ต์‹  ์„ฑ๊ณต alert ๋œธ
Controller์—์„œ js์—์„œ ๋ฐ›์€ ๋ฐ์ดํ„ฐ ์ถœ๋ ฅํ•ด๋ณด๋ฉด ์ฝ˜์†”์ฐฝ์— ๋œธ. ๋ฐ์ดํ„ฐ ์ž˜ ๋ฐ›์•„์ง„ ๊ฒƒ ํ™•์ธ ๊ฐ€๋Šฅ

์˜ˆ์ œ2. ์ปค๋งจ๋“œ ๊ฐ์ฒด ๊ฐ€์ ธ๊ฐ€๊ธฐ