728x90
반응형
1) SpringBoot
1-1) Ajax 예제2
1-1-1) 서버로 Ajax 요청 및 문자열 보내기 / 서버에서 문자열 받기 / 값 및 연산자 전달하여 계산하기
1) SpringBoot
1-1) Ajax 예제2
AJAX : 페이지 이동 없이 비동기적으로 실행시킴
$ : J-Query 함수임을 나타냄
Throwable : Error, Exception으로 구분되며 Error, Exception 각각은 다시 그 아래로 수많은 하위 클래스가 존재함
- Exception의 하위 클래스 중 "RuntimeException"의 하위 클래스는 우리가 따로 처리하지 않아도 알아서 자동으로 처리되어 넘어감
- 서로 상속 관계의 Exception 클래스의 경우에는 반드시 catch 문의 순서를 가장 하위 클래스부터 상위 클래스 순서로 넣어야 함
- 만일 서로 상속 관계가 아닌 Exception 클래스의 경우에는 catch 문의 순서를 어떻게 정해도 상관없음(어차피 서로 영향을 주지 않기 때문)
1-1-1) 서버로 Ajax 요청 및 문자열 보내기 / 서버에서 문자열 받기 / 값 및 연산자 전달하여 계산하기
(1) [src/main/java] - [net.datasa.test_ajax.controller] 안에 AjaxController.java 파일 생성 후 아래와 같이 작성
package net.datasa.test_ajax.controller;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
@Slf4j
@RequiredArgsConstructor
@Controller
public class AjaxController {
@GetMapping("ajax1")
public String ajax1() {
return "ajax1";
}
@ResponseBody
@GetMapping("ajaxtest1")
public void ajaxtest1() {
log.debug("AjaxController의 ajaxtest1() 메소드 실행함");
}
@ResponseBody
@PostMapping("ajaxtest2")
public void ajaxtest2(@RequestParam("str") String s) {
log.debug("전달된 값 : {}", s);
}
@ResponseBody
@GetMapping("ajaxtest3")
public String ajaxtest3() {
String s = "문자열";
return s;
}
@ResponseBody
@PostMapping("ajaxtest4")
public int ajaxtest4(@RequestParam("num1") int num1,
@RequestParam("num2") int num2) {
log.debug("전달된 입력값1 : {}", num1);
log.debug("전달된 입력값2 : {}", num2);
int result = num1 / num2;
return result;
}
// ResponseEntity<?> : 데이터 타입에 관계없이 모든 값을 리턴(String, int 등)할 수 있음
@ResponseBody
@PostMapping("ajaxtest5")
public ResponseEntity<?> ajaxtest5(@RequestParam("num1") String num1,
@RequestParam("num2") String num2) {
try {
int n1 = Integer.parseInt(num1);
int n2 = Integer.parseInt(num2);
int n3 = n1 / n2;
return ResponseEntity.ok(n3);
} catch (NumberFormatException e) {
e.printStackTrace();
return ResponseEntity.badRequest().body("정수가 아닙니다.");
} catch (ArithmeticException e) {
e.printStackTrace();
return ResponseEntity.badRequest().body("0으로 나눌 수 없습니다.");
} catch (Exception e) {
e.printStackTrace();
return ResponseEntity.badRequest().body("실행 실패");
}
}
@ResponseBody
@PostMapping("ajaxtest6")
public ResponseEntity<?> ajaxtest6(@RequestParam("inputNum1") String inputNum1,
@RequestParam("operator") String operator,
@RequestParam("inputNum2") String inputNum2) {
try {
int inputN1 = Integer.parseInt(inputNum1);
int inputN2 = Integer.parseInt(inputNum2);
int total = 0;
switch (operator) {
case "+" :
total = inputN1 + inputN2;
break;
case "-" :
total = inputN1 - inputN2;
break;
case "*" :
total = inputN1 * inputN2;
break;
case "/" :
total = inputN1 / inputN2;
break;
}
log.debug("전달된 결과값 : {}", total);
return ResponseEntity.ok(total);
} catch (NumberFormatException e) {
e.printStackTrace();
return ResponseEntity.badRequest().body("정수가 아닙니다.");
} catch (ArithmeticException e) {
e.printStackTrace();
return ResponseEntity.badRequest().body("0으로 나눌 수 없습니다.");
} catch (Exception e) {
e.printStackTrace();
return ResponseEntity.badRequest().body("실행 실패");
}
}
}
(2) [src/main/resources] - [templates] 안에 ajax1.html 파일 생성 후 아래와 같이 작성
<!DOCTYPE html>
<html xmlns:th="http://thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>test_ajax</title>
<script src="/js/jquery-3.7.1.min.js"></script>
<script>
function test1() {
alert("test1() 실행");
// 비동기적으로 서버 요청 보내기(http://localhost:8888/ajaxtest1)
// AJAX : 페이지 이동 없이 비동기적으로 실행시킴
// $ : J-Query 함수임을 나타냄
$.ajax({
url: "ajaxtest1", // url : 목적지 주소
type: "get", // type : 메소드 방식
success: function() { alert("성공"); },
error: function() { alert("실패"); }
});
alert("test1() 끝");
}
function test2() {
// ajaxtest2로 post 요청을 보냄
$.ajax({
url: "ajaxtest2",
type: "post",
data: {str: "클라이언트에서 보냄"},
success: function() { alert("성공2"); },
error: function() { alert("실패2"); }
});
}
function test3() {
// ajaxtest3으로 get 요청을 보냄
$.ajax({
url: "ajaxtest3",
type: "get",
// "dataType"은 기본값이 String이다!
dataType: "text", // json으로 받음
success: function(a) {
alert(a);
},
error: function() { alert("실패3"); }
});
}
function test4() {
// ID가 num1, num2인 입력란의 값을 읽어서 /ajaxtest4 경로로 보냄
// Controller에서 더하기 계산하여 결과를 리턴함
// 리턴받은 값을 ID가 num3인 입력란에 보여줌
let data = {num1 : $("#num1").val(),
num2 : $("#num2").val()};
$.ajax({
url: "ajaxtest4",
type: "post",
data: data,
dataType: "text",
success: function(msg) {
$("#num3").val(msg);
},
error: function(e) {
alert("계산 실패");
}
});
}
function test5() {
let data = {num1 : $("#num1").val(),
num2 : $("#num2").val()};
$.ajax({
url: "ajaxtest5",
type: "post",
data: data,
dataType: "text",
success: function(msg) {
$("#num3").val(msg);
},
error: function(e) {
// alert("계산 실패");
// JSON.stringify() : 객체의 내용을 문자열화해주는 메소드
// alert(JSON.stringify(e));
alert(e.responseText);
}
});
}
function test6() {
let data = {inputNum1 : $("#inputNum1").val(),
operator : $("select[name=operator] option:selected").text(),
inputNum2 : $("#inputNum2").val()};
$.ajax({
url: "ajaxtest6",
type: "post",
data: data,
dataType: "text",
success: function(msg) {
$("#totalNum").val(msg);
},
error: function(e) {
// alert("계산 실패");
// JSON.stringify() : 객체의 내용을 문자열화해주는 메소드
// alert(JSON.stringify(e));
alert(e.responseText);
$("#inputNum1").val("");
$("#inputNum2").val("");
$("#totalNum").val("");
}
});
}
</script>
</head>
<body>
<h1>[ Ajax 테스트 1 ]</h1>
여기는 ajax.html입니다.
<p>
<a href="javascript:test1()">서버로 Ajax 요청 보내기</a>
</p>
<p>
<a href="javascript:test2()">서버로 문자열 보내기</a>
</p>
<p>
<a href="javascript:test3()">서버에서 문자열 받기</a>
</p>
<br>
<p>
<a href="javascript:test4()">값 전달하여 계산하기 1</a>
</p>
<p>
<a href="javascript:test5()">값 전달하여 계산하기 2</a>
</p>
<p>
<input type="text" id="num1">
<input type="text" id="num2">
<input type="text" id="num3">
</p>
<br>
<p>값과 연산자 전달하여 계산하기</p>
<p>
<input type="text" id="inputNum1">
<select name="operator">
<option value="plus" selected>+</option>
<option value="minus">-</option>
<option value="multiply">*</option>
<option value="divide">/</option>
</select>
<input type="text" id="inputNum2">
<a href="javascript:test6()">
<input type="button" id="equal" value="=">
</a>
<input type="text" id="totalNum">
</p>
</body>
</html>
(3) 결과 화면
첫 접속 화면
"Ajax 테스트 페이지 1" 화면
- "서버로 문자열 보내기" 문구 클릭 시 화면
- "서버에서 문자열 받기" 문구 클릭 시 화면
- "값 전달하여 계산하기 1" 문구 클릭 시 화면 : 값을 제대로 잘 입력한 경우, 잘못된 값 입력(문자열, 미입력 등)한 경우
- "값 전달하여 계산하기 2" 문구 클릭 시 화면 : 값을 제대로 잘 입력한 경우, 잘못된 값 입력(문자열, 미입력 등)한 경우
- "값과 연산자 전달하여 계산하기" 문구 아래 "=" 버튼 클릭 시 계산 화면 : 값을 제대로 잘 입력한 경우, 잘못된 값 입력(문자열, 미입력 등)한 경우(입력값과 기존 출력값을 모두 비워줌)
