회원 이름을 검색하면 그에 맞는 회원 정보를 창에 보여주는 기능을 구현했다.
프로필 조회 하이퍼 링크를 클릭 시 이동한다.
select.php
<!DOCTYPE html>
<html>
<haed>
<meta charset="utf8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#select").click(function(){
var username = $("#username").val();
$.ajax({
async: true,
type: 'POST',
data: {'username': username},
url: '/member/member_select.php',
dataType: 'text',
success: function(data){
var div = document.createElement('div');
var text = document.createTextNode(data);
div.appendChild(text);
document.body.append(div);
},
error: function(error){
alert(0);
}
});
});
});
</script>
</haed>
<body>
<input type="text" id="username" name="username" placeholder="이름">
<input type="button" id="select" name="select" value="조회">
</body>
</html>
위와 같이 사용자 이름을 입력 받는 폼이 하나 존재한다. 해당 폼에 입력 후 조회 버튼을 누르면 해당 사용자 이름을 가진 유저의 프로필이 조회가 된다.
비동기적으로 서버와 ajax 통신을 한다. member_select.php에 데이터를 POST 형식으로 보낸 후 응답 데이터를 받아 div태그를 생성해 창에 보여준다.
member_select.php
<?php
include "/opt/homebrew/var/www/db/db_init.php";
if (getenv("REQUEST_METHOD") == "POST") {
$username = $_POST["username"];
$sql_id = "SELECT id FROM login WHERE username='$username'";
$result_id = $conn->query($sql_id);
$row = $result_id->fetch_assoc();
echo $row["id"];
}
POST 요청으로 받은 username을 토대로 회원 정보를 조회한다. 조회된 내용을 select.php에 리턴한다.
으 초라해..