2024-10-04 14:53:37 +09:00
|
|
|
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
|
2024-09-25 16:50:58 +09:00
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Join</title>
|
|
|
|
|
<style>
|
|
|
|
|
table {
|
|
|
|
|
width: 280px;
|
2024-10-04 14:53:37 +09:00
|
|
|
height: 850px;
|
2024-09-25 16:50:58 +09:00
|
|
|
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>
|
2024-10-05 19:30:38 +09:00
|
|
|
<script th:inline="javascript">
|
2024-10-04 17:33:19 +09:00
|
|
|
function getDivder() {
|
|
|
|
|
return "_||L_"
|
|
|
|
|
}
|
|
|
|
|
function mergeData(a , b) {
|
2024-10-05 19:30:38 +09:00
|
|
|
return btoa(a.join("") + getDivder() + b.join(""))
|
2024-10-04 17:33:19 +09:00
|
|
|
}
|
2024-09-25 16:50:58 +09:00
|
|
|
|
|
|
|
|
function userJoin() {
|
2024-10-05 19:30:38 +09:00
|
|
|
var type = [[${ENC}]]
|
|
|
|
|
console.log(type)
|
2024-09-25 16:50:58 +09:00
|
|
|
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;
|
2024-10-04 17:33:19 +09:00
|
|
|
if (user_pw === user_pw_check) {
|
|
|
|
|
var user_email = document.getElementById("user_email").value;
|
|
|
|
|
var user_birth = document.getElementById("user_birth").value;
|
|
|
|
|
var user_name = document.getElementById("user_name").value;
|
2024-09-25 16:50:58 +09:00
|
|
|
|
2024-10-04 17:33:19 +09:00
|
|
|
/* 통신에 사용 될 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;
|
|
|
|
|
console.log(result)
|
|
|
|
|
alert('Request OK!' + result);
|
|
|
|
|
// document.getElementById("name").innerText = result.name;
|
|
|
|
|
// document.getElementById("age").innerText = result.age;
|
|
|
|
|
} else {
|
2024-10-05 19:15:51 +09:00
|
|
|
alert(httpRequest.response);
|
2024-10-04 17:33:19 +09:00
|
|
|
alert('Request Error!');
|
|
|
|
|
}
|
2024-09-25 16:50:58 +09:00
|
|
|
}
|
2024-10-04 17:33:19 +09:00
|
|
|
};
|
|
|
|
|
/* Get 방식으로 name 파라미터와 함께 요청 */
|
2024-10-05 19:15:51 +09:00
|
|
|
httpRequest.open('POST', 'joinUser.ajax', true);
|
2024-10-04 17:33:19 +09:00
|
|
|
httpRequest.setRequestHeader("Content-Type", "text/plain");
|
2024-09-25 16:50:58 +09:00
|
|
|
|
2024-10-04 17:33:19 +09:00
|
|
|
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
|
|
|
|
|
}
|
|
|
|
|
var odd = []
|
|
|
|
|
var even = []
|
|
|
|
|
var dataStr = JSON.stringify(data)
|
|
|
|
|
var src = dataStr.split("")
|
|
|
|
|
src.forEach(function (s,i,a) {if (i % 2 === 0) {even.push(s)} else {odd.push(s)}})
|
|
|
|
|
httpRequest.send(mergeData(even.reverse(),odd.reverse()));
|
2024-09-25 16:50:58 +09:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2024-10-04 17:33:19 +09:00
|
|
|
|
2024-09-25 16:50:58 +09:00
|
|
|
<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>
|
2024-10-04 17:33:19 +09:00
|
|
|
|
2024-09-25 16:50:58 +09:00
|
|
|
</body>
|
|
|
|
|
</html>
|
