fetch 로 데이터를 전송하기
case 1. 가상의 폼을 만들고 거기에 값을 담아 fetch 의 body 에 넣어 보낸다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login Fetch</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="container p-5">
<form id="loginForm">
<div class="row">
<div class="col-sm-12 mb-3">
<label for="id" class="form-label">Name</label>
<input type="text" class="form-control" id="name" name="name">
</div>
</div>
<div class="row">
<div class="col-sm-12 mb-3">
<label for="id" class="form-label">Age</label>
<input type="number" class="form-control" id="age" name="age">
</div>
</div>
<div class="row">
<div class="col-sm-12 mb-3" id="errorMessage">
</div>
</div>
<div class="row">
<div class="col-sm-12 mb-3">
<button type="button" class="btn btn-md btn-success" id="btnLogin" onclick="saveProc()">Save</button>
</div>
</div>
</form>
</div>
<script>
function saveProc(){
const formData = new FormData();
const name = document.querySelector("#name").value
const age = document.querySelector("#age").value
formData.append("name", name);
formData.append("age", age);
fetch('./card_proc.php', {
method: 'POST', // Default : GET
body: formData
})
.then(response => {
if( response.ok == true ) {
return response.json()
response.json()
}
})
.then(result => {
if( result.success == true ) {
document.querySelector("#errorMessage").innerHTML = "Success Login";
} else {
document.querySelector("#errorMessage").innerHTML = result.message;
}
console.log( result );
})
.catch(error => {
});
}
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
들어오는 데이터를 확인하기 위하여 임시 Response
<?php
header('Content-Type: application/json');
##DB Connection
/*
.......
.......
*/
$data["success"] = false;
$data["input"] = $_POST; //check request
echo json_encode($data);
?>
case2.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login Fetch</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="container p-5">
<form id="loginForm">
<div class="row">
<div class="col-sm-12 mb-3">
<label for="id" class="form-label">UserName</label>
<input type="text" class="form-control" id="username" name="username">
</div>
</div>
<div class="row">
<div class="col-sm-12 mb-3">
<label for="id" class="form-label">Password</label>
<input type="password" class="form-control" id="password" name="password">
</div>
</div>
<div class="row">
<div class="col-sm-12 mb-3 text-red" id="errorMessage">
</div>
</div>
<div class="row">
<div class="col-sm-12 mb-3">
<button type="button" class="btn btn-md btn-success" id="btnLogin" onclick="loginProc()">로그인</button>
</div>
</div>
</form>
</div>
<script>
function loginProc(){
const form = document.getElementById('loginForm');
const formData = new FormData(form);
//formData.append("job", 'developer');
fetch('./login_proc.php', {
method: 'POST', // Default : GET
body: formData
})
.then(response => {
if( response.ok == true ) {
return response.json()
response.json()
}
})
.then(result => {
console.log( result );
})
.catch(error => {
});
}
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
**
Response 만들기
<?php
header('Content-Type: application/json');
##DB Connection
/*
.......
.......
*/
$data["success"] = true;
$data["message"] = "Login Succcess";
$data["input"] = $_POST; //check request
echo json_encode($data);
?>
Template 을 이용한 동적 엘리먼트 추가
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div id="messages"></div>
<template id = "rendering"> <!--template를 통해 tweet 출력-->
<ul>
<span class = "userName">userName</span>
<span class = "tweetTime"></span>
<div class = "message"></div>
</ul>
</template>
<script>
function renderTweet(){
let parent = document.querySelector('#messages'); // 메세지 담는 div에 전달할것.
let template = document.querySelector('#rendering'); // HTML의 id = rendering 템플릿 참고할것.
let newTweet = document.importNode(template.content, true); // newTweet에 template 복사.
let userName = 'TeddyCho'; // 이 줄을 없애면, user name onclick이벤트에서 에러 발생.
newTweet.querySelector('.userName').innerHTML = userName; // user name에 DATA i번째 유저 담고
newTweet.querySelector('.userName').onclick = function(){ // user name에 onclick 함수 지정.
filterTweet(userName);
}
newTweet.querySelector('.tweetTime').innerHTML = '2024.01.02';// 유저네임에 DATA i번째 시간 담고,
newTweet.querySelector('.message').innerHTML = 'my message';// 유저네임에 DATA i번째 메세지 담고,
parent.appendChild(newTweet);// 메세지 담는 div 아래에 자식 element로 추가.
}
renderTweet();
renderTweet();
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>