jQuery를 이용한 Ajax + json

jQuery를 이용한 Ajax + json 

 

1. ajax.js

function getAjax(sFile, jData, sFunction) {

    $.ajax({ 

        type     : "POST"
    ,   url      : sFile
    ,   dataType : "json"
    ,   data     : "jData=" + jData
    ,   error    : function(r) {
            alert("정보전송에 실패하였습니다.");

        }
    ,   success  : function(r) {
            sFunction(r);
        }
    }); 

} 

- jquery ajax 라고 검색하면 흔히 볼 수 있는 $.ajax()에 인수만 추가했다. 

 

2. 실행 

var jData = '{ "sMode" : "1", "sTableName" : "TUI", "sValue" : "' + $('#txt_user_id').val() + '" }'; 

getAjax("/ajax/user_info.php", jData, setAlert);

- 사용자 정보 테이블에서 입력된 사용자 아이디를 가져오라는 뜻이다.

 

3. /ajax/user_info.php

$jData      = $_POST['jData'];
$jData      = str_replace('\\', '', $jData);                    // 왜그런지 프린트 해보면 안다.
$jData      = json_decode($jData, true);                        // 옵션 검색해 볼것.

 

$sTableName = str_replace("T", "tbl_", $jData['sTableName']);   // JavaScript 에서 테이블명 노출을 막기 위해 변경해서 썼다.

$sTableName = str_replace("U", "user", $jData['sTableName']);   // 배열에 규칙을 담고 for문을 돌려주는걸로 확장한다. 

$sTableName = str_replace("I", "_info", $jData['sTableName']);  // 이렇게 노가다로 쓰면 개발자 아니다. 이건 예제다.

 

if( $jData['sMode'] == 1 ) { 

    $sql       = "SELECT * FROM ".$sTableName." WHERE sUserId = '".$jData['sValue']."'";

    $aRow   = new Db_Query($sql, $dbConn);                      // 이부분은 dbConn 제어부분이다. 편할대로 접근하면된다.

    $aData   = $aRow->data[0];                                  // 마찬가지

    echo json_encode($aData);                                   // json_encode, json_decode 는 UTF-8 전용이다.

} 

- return이 아니고 echo다. 

 

3. Return 

function setAlert(r) { 

    aData = JSON.parse(r);                                      // json2.js 로 검색해본다. 

    if( aData.length > 0 ) { 

        alert("아이디 : " + aData.sUserId + " 이름 : " + aData.sUserName); 

    } 

    else { 

        alert("없는 사용자 입니다.");

    } 

} 

 

잡담 

쓰던 함수를 고쳐쓰기엔 복잡해서 이런 간단한 코드는 수기로 코딩할때가 많다. 사실 내가 쓰려고 블로그에 적어두고 있지만 막상 필요해지면 블로그 검색할 시간에 네이버에 검색하겠지.. 누군가 보고 도움이나 됐으면 좋겠다. 

[출처] jQuery를 이용한 Ajax + json|작성자 Xeroad