141 lines
4.7 KiB
HTML
141 lines
4.7 KiB
HTML
|
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
|
||
|
|
|
||
|
|
<html lang="ko">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Join</title>
|
||
|
|
<style>
|
||
|
|
table {
|
||
|
|
width: 280px;
|
||
|
|
height: 550px;
|
||
|
|
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>
|