벡엔드/spring
SPRING(10) 만약 다음 주소 API를 쓰는데 데이터베이스가 하나라면?
Alan__kang__morlang
2022. 1. 24. 15:35
반응형
데이터베이스를 설계하는 부분에서 주소를 받는 3영역이 필요하지만 만약 컬럼 값이 하나라면 코드에서 처리를 해주어야 합니다.
- 처리하기 위해서는 우편번호, 주소, 상세주소를 하나로 묶어서 데이터를 처리해야합니다.
그래서 자바스크립트로 하나로 뭉쳐서 보내는 방식은?
- 먼저 submit이었던 회원가입을 button으로 바꾸고 onclick에 register()를 넣어줍니다.
- 그리고 form에다가 id를 삽입하고 fo로 이름을 짓습니다.
<form id="fo" action="register" method="post">
<table border="1">
<tr><td>
<input type="text" name="id" placeholder="아이디"><br>
<input type="text" name="pw" placeholder="비밀번호"><br>
<input type="text" name="addr" id="addr1" readonly placeholder="우편번호" > <!-- readonly를 해야 사용자가 직접 작성하지 못합니다, -->
<input type="button" onclick="daumPost()" value="우편번호 찾기"><br>
<input type="text" id="addr2" readonly placeholder="주 소"> <!-- readonly를 해야 사용자가 직접 작성하지 못합니다, -->
<input type="text" id="addr3" placeholder="상세주소">
<br>
<hr>
<input type="button" onclick="register()" value="회원가입">
<!-- type을 submit에서 button으로 교체 후 onclick을 register()를 넣었음-->
</td></tr>
</table>
</form>
3. 그리고 script 부분에서 주소들을 합쳐줄 코드를 작성합니다.
function register() {
addr1 = $("#addr1").val()
addr2 = $("#addr2").val()
addr3 = $("#addr3").val()
addr = addr1 + "/" + addr2 + "/" + addr3
}
4. 그리고 form에 id로 fo로 지정해준것을 이용해 전송을 해주는 코드도 넣어줍니다.
fo.submit()을 해주면 값이 정상적으로 전송됩니다.
function register() {
addr1 = $("#addr1").val()
addr2 = $("#addr2").val()
addr3 = $("#addr3").val()
addr = addr1 + "/" + addr2 + "/" + addr3
$("#addr1").val(addr)
fo.submit()
}
그러면 하나의 컬럼값에 /로 묶여진 주소들이 데이터베이스에 잘 저장이 되는 것을 알 수 있습니다.
반응형