<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
form{
vertical-align: bottom;
}
#content{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<form action="">
제목: <input type="text" id="title" /> <br />
이름: <input type="text" id="name" /> <br />
내용: <input type="text" id="content" /> <br />
<input type="button" value="저장" id="resultBtn">
</form>
<div>
입력하신 데이터는 다음과 같습니다. <br />
제목 : <span id="resultTitle"></span><br />
이름 : <span id="resultName"></span><br />
내용 : <span id="resultContent"></span><br />
</div>
<script>
let titleInput = document.querySelector("#title");
let nameInput = document.querySelector("#name");
let contentInput = document.querySelector("#content");
let resultBtn = document.querySelector("#resultBtn");
let getAjaxSend = function(x, y, z) {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(this.status==200 && this.readyState==4){
resultTitle.innerText = JSON.parse(this.responseText)['title'];
resultName.innerText = JSON.parse(this.responseText)['name'];
resultContent.innerText = JSON.parse(this.responseText)['content'];
}
}
let dataStr = `http://localhost:3000/sub/${x}/${y}/${z}/`
xhr.open("GET", dataStr, true);
xhr.send();
return 0;
}
let subControl = () => {
let titleStr = titleInput.value;
let nameStr = nameInput.value;
let contentStr = contentInput.value;
resultTitle.innerText = titleStr;
resultName.innerText = nameStr;
resultContent.innerText = contentStr;
}
resultBtn.onclick = subControl;
</script>
</body>
</html>