태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

[jQuery.$ajax]mysql + php 서버에서 json 데이터 얻어오기

8년 전

webapp, hybrid 프로젝트에 있어 가장 많이 쓰이는 기법인데 많은 자료가 없는 듯 해, 기본적인 예제를 통해 방법을 익힐 수 있도록 포스팅한다.
다양한 방법을 통해 db의 자료를 json형식으로 얻을 수 있겟지만, 가장 쉽게 구현할 수 있는 PHP JSON 라이브러리를 활용한 방법을 소개한다.

PHP JSON 라이브러리는 http://pear.php.net/package/Services_JSON/download/ 에서 다운로드 가능하다. 다운로드한 라이브러리(JSON.php)는 JSON데이터를 내려줄 서버에 등록하고, 코드 작성을 시작하겠다.

<?php
    require('JSON.php'); // 서버에 등록한 라이브러리

    try{
        $connection = mysql_connect("localhost","아이디","비밀번호") or die ("Could not connect: " . mysql_error());
        mysql_query("SET NAMES utf8", $connection);
        mysql_select_db("DB명", $connection);

        $sql = "SELECT * FROM 테이블";
        $sth = mysql_query($sql) or die ("Could not connect: " . mysql_error());

        //JSON객체생성
        $json = new Services_JSON();

        $rows = array();
        while($r = mysql_fetch_assoc($sth)){
            $rows[] = $r;
        }

        $output = $json->encode($rows);
        echo $output;

        mysql_close($connection);
    }catch(Exception $e){
        //로그 기록
        echo $e->getMessage();
    }
?>

이제 서버에서 JSON 데이터를 내려줄 준비는 끝났다.
다음으로 서버에 JSON 데이터를 요청하고 받은 결과를 뿌려주는 화면 영역 코드 작성을 해보자.

<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>json데이터 사용하기</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="bodySwrap">

</div>
<script>
    $.ajax({
        type:'POST',
        url:'작성한 서버 URL',
        dataType:'json',
        timeout: 10000,
        success: function(data){
            alert(data[0].subject);
            alert(data.length);
        },
        error: function(request, textStatus, errorThrown){
            //에러내용확인
            alert('error: ' + textStatus);
        },
    });
</script>
</body>
</html>

위와 같이 작성이 되었다면, 브라우저에서 화면을 열어보자.
화면을 실행하면, DB에서 출력된 JSON의 첫번째 데이터의 subject필드 팝업 출력 후 JSON데이터의 길이 팝업이 출력될 것이다.

위와 같은 기본 구조를 활용하여, 다양한 방식으로 구현 가능할 것이다.

추천 목록

번호	제목
2,765	자바스크립트 연습 예제 - 랜덤하게 움직이는 텍스트 만들기
2,764	jQuery Mobile에서 유용한 코드 10가지
2,763	자바스크립트로 복사하기 기능 구현하기
2,762	[JqueryMobile] - Jquery Mobile 화면 강제 회전
2,761	jQuery – 스마트폰 스크린 회전 감지 스크립트
2,760	javascript audio파일 재생
2,759	javascript 변수 scope shadowing 클로저
2,758	javascript 반복문
2,757	javascript 조건문
2,756	javascript 배열
2,755	javascript 연산자와 함수
2,754	javascript 자료형
2,753	javascript 변수
2,752	[jQuery] animate()에서 stop()의 중요성
2,751	javascript audio파일 재생
	[jQuery.$ajax]mysql + php 서버에서 json 데이터 얻어오기
2,749	Daum에서 사용하고 있는 마우스 오른쪽 사용 금지 스크립트
2,748	MP3 링크시 스트리밍 되지 않고 다운로드 되도록 만들기
2,747	jQuery 비동기 Ajax 통신을 해보자!! - JSON방식
2,746	[jQuery] load 를 이용한 실시간 페이지 가져오기
2,745	[jQuery]비동기적으로 JSON파일 로드
2,744	[jQuery]동적으로 원격 페이지 로드
2,743	[jQuery]워터마크 텍스트박스 컨트롤 구현
2,742	[jQuery]트리뷰 컨트롤
2,741	[jQuery]애니메이션 효과 멈추기 - stop()
2,740	[jQuery]여러가지 효과 동시 처리 - animate()
2,739	[jQuery]슬라이드 업
2,738	[jQuery]슬라이드 업/다운 - slideToggle()
2,737	[jQuery] scroll down 과 scroll up 할때 이벤트 적용시키기
2,736	[jQuery]addClass() : 스타일 추가 [removeClass()]