lun_admin/lunBackServer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

...

Browse Source
This commit is contained in:
lunaticbum
2024-10-04 14:53:37 +09:00
parent 62475fde46
commit 7df54a521c
13 changed files with 240 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/templates/user/join.html
+140
View File
@@ -0,0 +1,140 @@
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Join</title>
<style>
table {
width: 280px;
height: 850px;
margin: auto;
}
.email {
width: 127px;
height: 32px;
font-size: 15px;
border: 0;
border-color: lightgray;
border-radius: 15px;
outline: none;
padding-left: 10px;
background-color: rgb(233,233,233);
}
.text {
width: 250px;
height: 32px;
font-size: 15px;
border: 0;
border-radius: 15px;
outline: none;
padding-left: 10px;
background-color: rgb(233,233,233);
}
select {
width: 100px;
height: 32px;
font-size: 15px;
border: 1px;
border-color: lightgray;
border-radius: 15px;
outline: none;
padding-left: 10px;
}
.btn {
width: 262px;
height: 32px;
font-size: 15px;
border: 0;
border-radius: 15px;
outline: none;
padding-left: 10px;
background-color: rgb(164, 199, 255);
}
.btn:active {
width: 262px;
height: 32px;
font-size: 15px;
border: 0;
border-radius: 15px;
outline: none;
padding-left: 10px;
background-color: rgb(61, 135, 255);
}
</style>
<script>
function userJoin() {
var httpRequest;
var user_id = document.getElementById("user_id").value;
var user_pw = document.getElementById("user_pw").value;
var user_pw_check = document.getElementById("user_pw_check").value;
var user_email = document.getElementById("user_email").value;
var user_birth = document.getElementById("user_birth").value;
var user_name = document.getElementById("user_name").value;
/* 통신에 사용 될 XMLHttpRequest 객체 정의 */
httpRequest = new XMLHttpRequest();
/* httpRequest의 readyState가 변화했을때 함수 실행 */
httpRequest.onreadystatechange = () => {
/* readyState가 Done이고 응답 값이 200일 때, 받아온 response로 name과 age를 그려줌 */
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
var result = httpRequest.response;
document.getElementById("name").innerText = result.name;
document.getElementById("age").innerText = result.age;
} else {
alert('Request Error!');
}
}
};
/* Get 방식으로 name 파라미터와 함께 요청 */
httpRequest.open('POST', 'joinUser.api', true);
httpRequest.setRequestHeader("Content-Type", "application/json");
let data = {
'user_id': user_id,
'user_pw': user_pw,
'user_pw_check': user_pw_check,
'user_email': user_email,
'user_birth': user_birth,
'user_name': user_name
}
httpRequest.send(JSON.stringify(data));
}
</script>
</head>
<body>
<form >
<table>
<tr>
<td><h2>회원가입</h2></td>
</tr>
<tr><td>아이디</td></tr>
<tr><td><input id="user_id" type="text" class="text"></td></tr>
<tr><td>비밀번호</td></tr>
<tr><td><input id="user_pw" type="password" class="text"></td></tr>
<tr><td>비밀번호 확인</td></tr>
<tr><td><input id="user_pw_check" type="password" class="text"></td></tr>
<tr><td>이름</td></tr>
<tr><td><input id="user_name" type="text" class="text"></td></tr>
<tr><td>생년월일</td></tr>
<tr><td><input id="user_birth" type="date" class="text"></td></tr>
<tr><td>이메일</td></tr>
<tr>
<td><input id="user_email" type="text" class="email"> @
<select>
<option>naver.com</option>
<option>gmail.com</option>
<option>daum.net</option>
<option>nate.com</option>
</select>
</td>
</tr>
<tr><td><input type="submit" value="가입하기" class="btn" onclick="userJoin()"></td></tr>
</table>
</form>
</body>
</html>