-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
62 lines (52 loc) · 2.82 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SQLite 데이터 입력</title>
</head>
<body>
<h2>숫자 입력 후 DB 저장</h2>
<form id="dataForm">
<input type="number" id="numberInput" step="1" min="-2147483648" max="2147483647" required>
<button type="submit">저장</button>
</form>
<script>
document.getElementById("dataForm").
addEventListener("submit", function(event) { // 'dataForm' 에 리스너로 익명 함수(람다) 추가
event.preventDefault(); // HTML 요소의 기본 동작을 막는 역할
// 'numberInput' 값 얻기 (해당 입력 타입은 숫자만 입력 가능함)
const numberValue = document.getElementById("numberInput").value;
const checkingNumber = numberValue.value;
// 정수인지 확인 (소수점 포함 여부 검사)
if (!/^-?\d+$/.test(checkingNumber)) {
alert("정수만 입력 가능합니다.");
return;
}
fetch("/insert", { // 비동기 HTTP 요청 정보 : 'insert'
method: "POST", // GET(가져오기), POST(보내기), PUT(업데이트), DELETE(삭제), PATCH(일부갱신), HEAD(본문없음), OPTIONS(서버지원 메소드 확인)
headers: { "Content-Type": "application/json" }, // JSON 형식 사용
body: JSON.stringify({ number: numberValue }) // JSON 'number' 의 필드 값에 numberValue 를 설정
})
.then(response => response.text()) // 반환되는 응답값은 텍스트 (json(), text(), blob(), arrayBuffer(), formData() 설정 가능)
.then(data => alert(data)) // 결과 데이터는 웹 화면의 경고(alert)로 표시
.catch(error => console.error("Error:", error)); // 에러는 콘솔로 표시
});
</script>
<h2>DB에서 가장 큰 값 가져오기</h2>
<button onclick="getMaxValue()">최대값 조회</button>
<p id="maxValue">최대값: -</p>
<script>
function getMaxValue() {
fetch("/max") // 비동기 HTTP 요청 정보 : 'max' (디폴트 GET 으로 요청 fetch("/max", { method: "GET" }) )
.then(response => response.text()) // 반환되는 응답값은 텍스트
.then(data => {
// 결과 데이터를 'maxValue' 에 입력
document.getElementById("maxValue").innerText = "최대값: " + data;
// innerText는 요소의 보이는(렌더링된) 텍스트만 반환 (CSS 스타일 미반영)
})
.catch(error => console.error("Error:", error)); // 에러는 콘솔로 표시
}
</script>
</body>
</html>