안녕하세요 상훈입니다.
이 글을 PHP에 올려야할지 javascript에 올려야할지 고민을 1초 정도 했고 자바스크립트 기반이기 때문에 자바스크립트에 게시하게 되었습니다.
해당 과정은 [ select-box의 한 항목을 선택하면, 그 아래의 select-box가 활성화되면서 해당되는 리스트를 출력 ] 합니다.
Ajax로 php에 호출을 하면, php의 데이터베이스에서 데이터를 출력하여 배열에 담고,
담은 배열을 json endcode하여 출력하는 값을 json 형식으로 받아, 파싱하여 출력하는 것입니다.
1. javascript(ajax) (제이쿼리 필요합니다! [ cdn 링크 ] )
2. php
[ jQuery ] jQuery 제이쿼리 CDN 링크 공유
안녕하세요 상훈입니다. 자바스크립트 - 제이쿼리의 cdn을 공유합니다. 해당 코드 한줄을 내에 넣어줍니다.
code-hoon.tistory.com
HTML
<select id="name" onchange="selectItem()" name="name">
<option value="" selected>아이템 리스트들</option>
<option value="item01" >아이템 리스트1</option>
<option value="item02" >아이템 리스트2</option>
<option value="item03" >아이템 리스트3</option>
</select>
<select id="item_name">
<option value="">선택해주세요</option>
</select>
이러한 html 요소들이 존재합니다.
onchange() 기능을 이용해 js에서 감지할 수 있도록 함수로 선언해주었습니다.
좌측에 select-box와 우측에 빈 select-box
리스트 요소 중 하나를 선택하면 해당되는 2번째 select-box에 값을 출력해줍니다. [ 데이터베이스 이용 ]
JAVASCRIPT - 아래에서 상세히 설명
<script>
function selectItem(value){
any_name = document.querySelector('#name').value
$.ajax({
url: "getItemList.php",
method: "POST",
data: { any_name: any_name }
})
.done(
(result) => {
if(result === ''){
const item_name = document.querySelector('#item_name')
while(item_name.hasChildNodes() ){
item_name.removeChild(item_name.firstChild)
}
$('#item_name').append('<option value="">' + '선택해주세요 ' + '</option>');
}else{
const item_name = jQuery.parseJSON(result)
i = 0
$.each(item_name, function(){
$('#item_name').append('<option value="' + item_name[i] + '">' + item_name[i] + '</option>');
i++
});
}
}
)
.fail( () => { alert('다시 시도해주세요.') })
}
</script>
ajax 기본 틀
클릭시 복사할 수 있는 페이지로 이동(새창)
PHP [getItemList.php]
<?php
//
if($any_name = $_POST['any_name'] ){
//database 연동
include '../db.php';
//sql 작성
$sql = "select item_name from 테이블 where 컬럼명 = '$any_name' ";
$result = mysqli_query($conn, $sql);
// 빈 배열 $array[]에 $row['item_name'] 넣어주기
while($row = mysqli_fetch_assoc($result)){
$array[] = $row['item_name'];
}
// json 객체로 변환하여 echo
echo json_encode($array, JSON_UNESCAPED_UNICODE);
}else{
echo ""; // 만약 선택하지 않았을 때 반환하는 값 : null
}
처음부터 보자면,
1. name 이라는 id 를 가진 요소의 값을 가져온다. ( 첫번째 select-box에서 선택한 요소 )
2. ajax를 이용하여 데이터를 송신한다.
[ 목적지 : url,
방식 : method(get, post) ,
송신할 요소 (parameter) : data ]
3. php 에서 데이터를 출력하고 json 객체로 출력해주기
-> 주석으로 충분히 설명을 했다고 생각합니다.
4. javascript 에서 .done 부분
if영역(return null) 과 else영역(return json)은 각기 다른 결과를 나타냅니다.
else영역(return json)부터 보자면,
1. item_name이라는 상수에 JSON을 파싱한 결과값(result)을 담습니다.
2. jQuery의 each함수를 사용하여, item_name을 반복해줍니다.
3. 각각 가지고 있는 item_name의 개수에 따라 결과에 추가될 리스트의 개수가 달라집니다.
이와 같이 값이 호출되었습니다.
if영역(return null) 에서는 추가했던 option을 제거해주는 역할을 합니다.
(혹은 이 내용을 기본값으로 하는 것도 좋을것같군요. 기본적으로 속을 비워주고, option을 채워주는 방식으로요.)
평소 ajax를 잘 사용하지 않아 해당 내용을 작성하는데에 조금 헤맸습니다.
이번 기회로인해 공부 잘하고 갑니다. ㅎㅎ
참고
jQuery.ajax() | jQuery API Documentation
Description: Perform an asynchronous HTTP (Ajax) request. The $.ajax() function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly call this function, as several higher-level alternatives like $.get() and .load() are available
api.jquery.com
[자바스크립트] 모든 자식 엘레멘트 삭제하기 (Remove all children)
[Javascript] Removing all children using DOM * HTML로 프로그래밍하다보면 모든 자식 노드를 삭제해야하는 경우가 생긴다 그럴때 사용하면 되는 간단한 팁이다. var cell = document.getElementById("cell"); w..
unikys.tistory.com
이상입니다.
