이전: https://velog.io/@azurp158/4주차-과제WEB2
이전 작업과 이어진다.
결과물
- 우선 주소 찾기를 누르면 팝업창이 뜨게 만들었다.
- 입력에 따라 우편 번호와 도로명이 나오게 만들었다.
- 만들어 보고 싶어서 만든 부분이긴 하지만, 조금 불안정했던 부분이 있었다. 입력값이 달라질 때마다 query문을 보내는 것인지(내가 원했던게 맞긴 하지만) api를 썼을 때와는 다르게 값을 불러오는게 스무스하지 못했다. 팝업창이 깜빡이기도 했다.
- 원하는 도로명, 예를 들어 서울시 서울시립대로2길을 누르면 위와 같이 text의 값이 바뀌고 disabled을 활성화시켰다.
- 로그인을 하니 제대로 저장된 것을 볼 수 있었다.
코드
``` //sign_up.js function Input_Address(){ var addwin = window.open("check_address.php", "ckaddr", "width = 400, height = 200"); } ```- 이전에 쓰던 Input_Address를 수정한 것이다. 이름을 바꿔야 할 것 같다.
//check_address.php
<!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>
<script src = './check_address.js'></script>
</head>
<body>
<input type="text" name="address" id="address" placeholder = "예시) 서울특별시 테헤란로" oninput="handleInput();">
<input type="button" name = "find" id = "find" value="확인">
<table>
<thead>
<tr>
<td width="70">우편번호</th>
<td width="500">도로명</th>
</tr>
</thead>
<tbody name = 'result' id = 'result'>
</tbody>
</table>
</body>
</html>- oninput 때문에 text에 입력을 넣을 때마다 handleInput()함수를 불러온다.
//check_address.js
function handleInput() {
const address = document.getElementById('address').value;
const query = `SELECT * FROM ZIPCODE WHERE DORO LIKE '%${address}%' LIMIT 5`;
// Ajax 요청 보내기
const xhr = new XMLHttpRequest();
xhr.open('GET', '/get_address.php?query=' + encodeURIComponent(query));
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
// 응답 데이터 처리하기
updateUI(response);
}
};
xhr.send();
}
function updateUI(response) {
const tableBodyElement = document.getElementById('result');
tableBodyElement.innerHTML = ''; // 테이블 본문 요소 초기화
for (const record of response) {
const rowElement = document.createElement('tr'); // 새로운 tr 요소 생성
const ZIPNO = document.createElement('td'); // 새로운 td 요소 생성
const DORO = document.createElement('td');
ZIPNO.textContent = record.ZIP_NO; // td 요소에 데이터 설정
DORO.textContent = recodr.SIDO + record.DORO;
rowElement.appendChild(ZIPNO); // td 요소를 tr 요소에 추가
rowElement.appendChild(DORO);
tableBodyElement.appendChild(rowElement); // tr 요소를 테이블 본문 요소에 추가
DORO.addEventListener('click', function(){
window.opener.Document.getElementById('Roadaddr').value = DORO;
window.opener.Document.getElementById('Decide_Roadaddr').value = DORO;
window.opener.Document.getElementById('Roadaddr').disabled = true;
window.close();
})
}
}- handleInput은 AJAX를 사용해서 query문을 보내 response를 받았다.
- './get_address.php'이 해당 요청에 응답을 받게 했다.
- 만약 response를 받았다면 updateUI(response)를 실행한다.
- updateUI는 말그대로 UI를 update 하는 것으로 tr 요소와 우편번호와 도로명 주소를 넣을 td를 만들어 tr에 넣어 갱신하게 만들었다.
- 뿐만 아니라 addEventListner을 사용해 DORO(td)를 누르면 부모창, 그러니까 sign_up.php의 Roadaddr, Decide_Roadaddr에 값을 저장하고 창을 종료하도록 만들었다.
//get_address.php
<?php
$conn = new mysqli('localhost', 'conn', 'Testnote!%89','test');
$q = $_GET['query'];
$result = $conn->query($q);
$rows = array();
while($row = $result->fetch_array(MYSQLI_ASSOC)) {
$rows[] = $row;
}
header('Content-Type: application/json');
echo json_encode($rows);
?>
- Ajax를 통해서 쿼리를 요청받는 코드다.
- GET request로 받고 이에 대한 결과를 json으로 넘겨준다.
- 해당 파일에서 조금 애를 먹었는데, html 형식이 붙어있어서 문제였다. json으로만 넘겨줘야하는데 잘 몰랐다.
오늘 공부한 것을 올리는 공간 / 일주일에 글 3개 / 블로그 이전 : https://perorochan321.tistory.com/