JSON 형식의 데이터값 읽어오기

exam03: 결과, 결과 2 버튼 생성. 결과 버튼 클릭할 경우 메시지, 데이터 처리상태 출력

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="../js/jquery-3.5.1.min.js"></script>

<script>

$(document).ready(function(){

    $("#b1").click(function(){

        $.get("data.txt", function(data,status){ //중간값 생략. 결과값만 가지고 옴

                //alert("data: "+data+"\n status:"+status);       

                if(status=="success"){

                    alert("성공입니다.");

                }

                var str="데이터: "+data+"\n 처리상태:"+status;

                $("#result").text(str);

            }

        ); //get

    }); //b1

}); //document

</script>

</head>

<body>

<button id="b1">결과</button>

<button id="b2">결과2</button>

<div id="result"></div> <!-- 결과값이 표시될 영역 지정 -->

</body>

</html>

data.txt: JSON 형식의 데이터

[

{

     "memberNumber":"m001",

     "irum":"goroman",

     "picture":"goroman.png"

 },

{

     "memberNumber":"m002",

     "irum":"kingkang",

     "picture":"myFace.png"

}

]

+ 파싱이 되어있는 함수를 사용 (exam03.jsp의 버튼2)

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="../js/jquery-3.5.1.min.js"></script>

<script>

$(document).ready(function(){

    $("#b1").click(function(){

        $.get("data.txt", function(data,status){ //중간값 생략. 결과값만 가지고 옴

                //alert("data: "+data+"\n status:"+status);       

                if(status=="success"){

                    alert("성공입니다.");

                }

                var str="데이터: "+data+"\n 처리상태:"+status;

                $("#result").text(str);

            }

        ); //get

    }) //b1

    $("#b2").click(function(){

        var htmlStr="";

        $.getJSON("data.txt", function(data){

            //alert(data.length);

            $.each(data,function(key,val){ //jquery의 반복문

                htmlStr+="회원번호: "+val.memberNumber+"<br>";

                htmlStr+="번호: "+val.irum+"<br>";

                htmlStr+="이미지: "+val.picture+"<hr>";

            })

            $("#result").html(htmlStr);

        }); //json형태로 이미 파싱되어 넘어옴. 한번더 파싱할 필요가 없음

    }) //b2

}); //document

</script>

</head>

<body>

<button id="b1">결과</button>

<button id="b2">결과2</button>

<div id="result"></div> <!-- 결과값이 표시될 영역 지정 -->

</body>

</html>

저작자표시 비영리 변경금지

'Learning > JSP' 카테고리의 다른 글

회원가입 (0)	2020.07.20
주소록 생성하기2 (0)	2020.07.16
ajax방식을 이용하여 id, pw 입력하고 하단부에 출력 (0)	2020.07.15
자바스크립트, DB 이용하여 주소록 생성하기 (0)	2020.07.13
jQuery 이용 (0)	2020.07.10