인생의 열번째 출구

문뜩 출근하는길에 지하철 계단을 올라가는 사람들의 등을 봤다.

누구는 집에 있는 자신의 가족을 위해

누구는 부모님을 위해

누구는 내일의 자신을 위해

모두의 등에 무거운 짐을 지고 가는 것 마냥 구부정 했다.

나는 어떠한가 생각을 해본다.

안녕하세요. 기본적으로 다들 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가 실행이 됩니다.

어찌 이해 하셨나요. 티스토리를 운영한지 얼마 안되고 저도 지식이 부족하다보니 두서 없이 설명을 했네요..

그럴땐 우리 서로 지식을 공유합시다 ㅎ 

일단 처음 쓰는거...... 아이폰x를 샀다.

아이폰x 다들 탈모 토끼귀 뭐 말이 많았는데

정작 쓰는 사람은 신경을 안쓴다. 가끔 토끼귀쪽에 문자나 카톡이나 알림이 걸리면 그거참 걸리적거린다.

암튼 이번에 아이폰x 큰맘먹고 질렀는데 이게 바로 돈지랄 이라고 하더라.

티스토리 초대장을 주신 웹스톰님께 정말 감사드리고 잘 꾸며볼께요