«

ajax로 json형태의 데이터를 받아 출력하기

서론

ajax는 웹서버와 비동기적으로 데이터를 교환하고 조작하기 위해 쓰이는 기술이다.

장점

단점

ajax처리를 하기 위해서는 json으로 받아올 jsp파일을 생성하자 test.jsp로 생성하고 아래처럼 json 방식으로 코드를 입력하자

    //test.jsp
    {"hacosa" : "minho" , "study" : {"ajax" : "ajaxValue","react":"reactValue"} }

입력이 끝났다면 index.html에서 아래의 코드를 삽입하자

    //index.html
    <script>
        $(document).ready(function() {
                $("#btn").click(function() {
                    var result = document.getElementById('ajaxValue');
                    $.ajax({
                        url : "test.jsp", // test.jsp 에서 받아옴
                        dataType :"json", // 데이터타입을 json 으로 받아옴
                        success : function(data) {
                            console.log(result.innerHTML = data.study.ajax);
                        },
                        error : function(e) {
                            console.log(e.responseText);
                        }
                    });
                });
        });
    </script>
    //index.html
    <input type="button" id="btn" value="click">
    <div id="ajaxValue"></div>

여기까지 삽입이 끝났다면 필요한 코드는 모두 입력이 끝났다. index.html을 실행하고 버튼을 클릭하면 data.study.ajax에 해당하는 json값이 넘어온다. 그 상태에서 study.ajax에 해당하는 json값을 수정후에 다시 버튼을 클릭해보면 새로고침을 하지 않아도 데이터 값이 변경 되는걸 확인할 수 있다.