[ajax] ajax를 사용한 데이터 로드

08 Feb 2018 • jstl

ajax는 현재 페이지를 유지하면서 ajax콜을 통해 데이터를 받아올 수 있는 기술이다.

현재 페이지를 유지하고 데이터를 가지고 오는 ajax

  • ajax는 기본적으로 jQuery 에 소속되어 있기 때문에 jQuery를 추가해야한다.
  • jQuery에 내장되어 있는 $.ajax()로 동작한다.

기본 ajax

$(document).ready(function () {
    $('button#testBtn1').on('click', function () {
        // property를 설정한다.
        $.ajax({
            url : "test.jsp",
            type : "get",
            data : {t1 : "Hello", t2 : "World"},
            success : function (data) {
                alert(data);
            },
            error : function (data) {
                alert(data);
            }
        });
    })
});
  • url : 경로
  • type : 전송방식
  • data : 데이터
  • success : 성공했을때 콜백
  • error : 에러일때 콜백

ajax 사용하기

  1. xml파일을 읽어 form에 출력

  2. json파일을 읽어 form에 출력

  3. DB에서 읽어 들어 form에 출력

    • 아이디 입력할때 사용자의 아이디가 있는지 없는지 체크할 대

외부 json 파일에서 데이터 로드

  • json으로 만들어진 파일을 읽고 성공하면 데이터를 출력한다.
$(function () {
    $('button#testBtn').on('click', function () {
        $.ajax({
            type: 'post',
            url: 'data.json',
            datatype: 'json',
            success: function(data){
                alert('data load ' + data);
                for(var i=0; i<data.length; i++){
                    console.log(data[i].version + ":" + data[i].codename);
                }
            },
            error: function (error) {
                alert('data error');
            }
        });
    })
})
  • 성공하면 반복문을 통해 콘솔에 결과를 출력한다.
$(function () {
    $('button#testBtn').on('click', function () {
        $.ajax({
            type: 'post',
            url: 'data.json',
            datatype: 'json',
            success: function(data){
                alert('data load ' + data);
                $.each(data, function (i, item) {
                    $('p#demo').append(item.version + " : " + item.codename + '<br>');
                })
            },
            error: function (error) {
                alert('data error');
            }
        });
    })
})
  • 반복문 외에 jQuery에서 제공하는 $.each() 함수를 통해 결과를 출력할 수 있다.

외부 web에서 파일 로드

  • json을 리턴하는 웹에 ajax를 통해 결과를 로드할 수 있다.
$(function() {
    $('button#testBtn').on('click', function () {
        $.ajax({
            type: 'post',
            url: 'https://iwb.jp/s/js/data.jsonp',
            dataType: 'jsonp',
            jsonpCallback: 'android',
            success: function(data) {
                $.each(data, function (i, item) {
                    $('p#demo').append(item.version + ' : '+ item.codename+'<br>');
                })
            }
        });
    })
})

xml 에서 데이터 로드

  • json뿐만 아니라 xml에서도 데이터를 읽어올 수 있다.
<?xml version="1.0" encoding="UTF-8"?>
<website>
    <news>
        <target>daum</target>
        <link>http://daum.com</link>
        <name>다음 사이트</name>
    </news>     

    <news>
        <target>google</target>
        <link>http://google.com</link>
        <name>구글 검색</name>
    </news>
</website>

var _xml;
var _arrTarget = [];
var _arrLink = [];
var _arrDesc = [];

$(function () {
    $('#testBtn').on('click', function () {
        $.ajax({
            url: 'data.xml',
            dataType: 'xml',
            type: 'post',
            success: function (data) {
                _xml = $(data).find("website");	// root를 찾아준다.
                var len = _xml.find("news").length;

                for(var i=0; i<len; i++){
                    _arrTarget[i] = _xml.find('news').eq(i).find('target').text();
                    _arrLink[i] = _xml.find('news').eq(i).find('link').text();
                    _arrDesc[i] = _xml.find('news').eq(i).find('name').text();

                    $('body').append(_arrTarget[i]);
                    $('body').append(_arrLink[i]);
                    $('body').append(_arrDesc[i]);
                    $('body').append("<br>");
                }
            },
            error: function (xhr) {

            }
        })
    })
})
  • xml파일을 읽어서 로드한다.
  • 각 태그의 이름을 알고있으면 더 쉽게 접근할 수 있다.
  • 태그별 데이터를 배열에 저장한다.

입력한 값 ajax로 전송하기

  • ajax는 데이터를 전송하는 것도 가능하다.
$(function () {
    $('#button').on('click', function () {
        $.ajax({
            type : 'get',
            url : 'check.jsp',
            data : {
                number : $('#number').val(),
                id : $('#id').val(),
                comment : $('#comment').val()
            },
            success : function (data) {
                $('div#ajaxReturn').html(data);
            },
            error : function (xhr) {

            }
        })
    })
})
  • check.jsp에 ajax 콜을 하면 check.jsp의 페이지의 정보를 읽어온다.
    • 리턴값이 json이 아니면 html코드 전체를 가져온다.
  • number, id, comment를 변수로 사용할 수 있다.
 ajax  .ajax()

Comments

Related Posts