안녕하세요. 기본적으로 다들 javascript 에 대해서 기본적인 지식이 있다 생각하고 글을 쓰겠습니다.
ajax로 아주 간단한 데이터 통신을 하려고하는데
바로 카테고리 변경 입니다.
먼저 Ajax는 Asynchronous Javascript And XML의 약자로, 일반적으로 클라이언트와 서버측의 데이터 전송 및 처리를 비동기적(Asynchronous)으로
처리하는 것에 그 목적이 있습니다.
Ajax를 사용함으로써, 서버측에 데이터를 요청한 후, 그 데이터의 수신이 완료될 때까지 기다리지 않고, 다른 작업을 바로 진행할 수 있씁니다.
그러한 이유로 좀더 웹페이지를 자유롭게 구성할 수 있게 되었고, 불필요한 잦은 페이지 로딩을 줄일 수 있습니다.
이제 Ajax로 한번 카테고리 변경 코딩을 해보는걸로 하시죠.
$(document).ready(function(){
$.ajax({
async : false(비동기식데이터처리),
type: 'POST',
url: '데이터가 처리될 url주소',
data: 전달 될 데이터,
error : function(response, status, request){
에러시 처리해줄 부분
},
success: function(resHtml){
데이터를 잘 전달해서 잘 받아오면 처리해야할 부분
}
});
});
보통 이렇게 되어있죠.
위 스크립트는 도큐먼트가 준비되자마자 저 ajax를 실행하는 걸로 되어있지만
우리는 카테고리가 변경 될때 원하는 카테고리를 얻어와야 하기때문에 ready 보단 다른걸 쓰겠습니다.
$("대상").on("change", function(){
$.ajax({
async : false(비동기식데이터처리),
type: 'POST',
url: '데이터가 처리될 url주소',
data: 전달 될 데이터,
error : function(response, status, request){
에러시 처리해줄 부분
},
success: function(resHtml){
데이터를 잘 전달해서 잘 받아오면 처리해야할 부분
}
});
});
이정도 보셨으면 대충 아~ 하실겁니다.
일단 기본적으로 변경될 대상을 만들어 보겠습니다.
(일반적으로 제가 사용하는 db에는 depthno 라고 카테고리의 대 중 소 분류가 1 2 3 으로 나눠져 있습니다.)
<select name="chg_code" id="chg_code">
<option value="철수">철수</option>
<option value="영희">영희</option>
</select>
<select name="chg_code2" id="chg_code2"></select>
$("#chg_code").on("change", function() {
var thisVal = $(this).val(); //선택한 값을 변수에 담아줍니다.
var thisdep = 2; //depthno 가 2번째 인걸 인식 시켜줍시다.
var param = "mode=getcatNm"; //보통 한개의 페이지에서 파라메타 값으로 다른 작업을 하기때문에 이렇게 되어있습니다.
param += "&val=" + encodeURIComponent(thisVal); // 문자타입이 서로 다르면 수신받는 곳에서 잘못 해석될 수도 있으니 공통된 문자인 아스크문자로 인코딩
param += "&dep=" + encodeURIComponent(thisdep); // 위와 같이 아스크문자로 인코딩 해준다음 depthno가 2라는 값을 param 변수에 추가해줍니다.
$.ajax({
async : false, type : "POST", url : "/admin/bbs/dep_chg.php", data : param, dataType : "html",
error : function(response, status, request) { // 통신 에러 발생시 처리
//alert("[알림!] 데이터 통신 도중 오류가 발생하였습니다.");
},
success: function (resHtml) {
$("#chg_code2").empty().html(resHtml); // id="chg_code2"를 먼저 빈값으로(empty()) 바꿔주고 성공적으로 가져온 데이터를 넣어줍니다.
}
});
});
이런식으로 데이터를 보내고 dep_chg.php 이 파일에서 원하는 데이터를 echo 시켜주면되겠죠?
다들 여기까진 잘 따라하거나 복붙하거나 합니다.
근데 데이터를 echo를 어떻게 시켜야하나..?? 하는 뭔가 가려운곳을 긁었는데 덜 긁은 느낌...그래서 한번 해봅니다.
생각보다 엄청 단순합니다.
db를 통한게 아닌 단순 코딩으로 해볼께요
아까 저 위에 param 변수를 보시면 mode라는 파라메타로 getcatNm 를 넘기고 있으니 이걸로 구분을 지어주면 되겠군요
<?php
if($mode = "getcatNm"){
$dep_code = $_REQUEST['val'];
$depthno = $_REQUEST['dep']; //우리가 ajax로 보낸 data를 변수에 저장합니다.
echo "<option value=''>:: 두번째분류 ::</option>";
if($depthno == 2){
echo "<option value='철수친구'>철수친구</option><option value='영희친구'>영희친구</option>";
}
}
?>
이렇게 해주면 됩니다..
그럼 저기에 echo 된 데이터들이 success에 resHtml 매개변수로 들어가 $("#chg_code2").empty().html(resHtml); 이 jquery가 실행이 됩니다.
어찌 이해 하셨나요. 티스토리를 운영한지 얼마 안되고 저도 지식이 부족하다보니 두서 없이 설명을 했네요..
그럴땐 우리 서로 지식을 공유합시다 ㅎ