ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 210618_1(jQuery_ajax_json)
      HTML_JS(Sol)/jQuery_Ajax 2021. 6. 18. 17:42

      json

      javascript object notation : 데이터 포맷 방법

       

      JSON은 속성-값 쌍 또는 "키-값"쌍으로 이루어진 데아터 오브젝트를

      전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는

      개방형 표준 포맷이다. 비동기 브라우저/서버 통신을 위해,

      넓게는 XML을 대체하는 주요 데이터 포맷이다.

       

      활용법

      1. { 로 시작하고 } 로 끝난다.

      2. {  } 안에 키 : 밸류 로 지정한다

      3. 키 : 밸류가 반복되면 , 쉼표로 구별한다.

      밸류가 반복 되는 구조는 k : [v, v, v, v,]형태가 된다.

      4. 같은 키 : 밸류 가 반복되는 { }들은 , 쉼표 구별하여  [ ] 로 감싼다. ===> k : [{k:v},{k:v},{k:v}]

      <!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>json(1)</title>

		<!-- 모바일 웹 페이지 설정 -->
		<link rel="shortcut icon" href="img/icon.png" />
		<link rel="apple-touch-icon" href="img/icon.png" />
		<!-- 모바일 웹 페이지 설정 끝 -->

		<!--[if lt IE 9]>
		<script src="js/html5shiv.js"></script>
		<![endif]-->

		<!-- 공통 css -->
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>

		<!-- jQuery Framework 참조하기 -->
		<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

		<!-- 사용자 스크립트 블록 -->
		<script type="text/javascript">
			$(function(){
                $("#mybtn").click(function(){
                    $.ajax({
                        url : "ajax/json/04.json",
                        type : "get",
                        dataType : "json",
                        cache : false,
                        timeout : 30000,
                        success : function(json){
                            //파라미터로 전달되는 객체는 JSON 자체이다.
                            var title = json.school.subject.title;
                            var time = json.school.subjecttime;
                            var teacher = json.school.subject.teacher;

                            /** 요소의 동적 생성 및 데이터 출력구현*/
                            var ul = $("<div>");
                            var li1 = $("<p>").html(title);
                            var li2 = $("<p>").html(time);
                            var li3 = $("<p>").html(teacher);

                        $("#result").append(ul.append(li1).append(li2).append(li3));
                        },
                        error: function(xhr, textStatus, errorThrown){
                            $("div").html("<div>" + textStatus + " (HTTP-" + xhr.state + " / " + errorThrown + ")</div>" );
                        }
                    });
                });
            })
		</script>

	</head>
	<body>
        <h1 class="title">$.ajax() 함수를 사용한 JSON데이터 읽기 (1)</h1>
        <div class="exec">
            <input type="button" value="JSON데이터 가져오기" id="mybtn"/>
        </div>
        <div class="console" id="result"></div>
	</body>
</html>
      jason
{
	"school": {
		"subject": {
			"title": "Javascript+jQuery+Ajax",
			"time": "매주 월/수/금 오후 7시30분~10시20분",
			"teacher": "주영아"
		}
	}
}

       

      <!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>json(2)</title>

		<!-- 모바일 웹 페이지 설정 -->
		<link rel="shortcut icon" href="img/icon.png" />
		<link rel="apple-touch-icon" href="img/icon.png" />
		<!-- 모바일 웹 페이지 설정 끝 -->

		<!--[if lt IE 9]>
		<script src="js/html5shiv.js"></script>
		<![endif]-->

		<!-- 공통 css -->
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>

		<!-- jQuery Framework 참조하기 -->
		<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

		<!-- 사용자 스크립트 블록 -->
		<script type="text/javascript">
		$(function(){
            $("#mybtn").click(function(){
                $.ajax({
                    url : "ajax/json/05.json",
                    type : "get",
                    dataType : "json",
                    cache : false,
                    timeout : 30000,
                    success : function(json) {
                        //배열까지 접근한다.
                        var subject = json.school.subject;
                        //배열의 길이 만큼 반복문 처리한다.
                        for(var i=0; i<subject.length; i++){
                            //반복처리 안에서 i 번째 요소는 JSON데이터 자체이다.

                            var title = subject[i].title;
                            var time =  subject[i].time;
                            var teacher = subject[i].teacher;
                       
                        /** 결과를 출력하기 위한 동적 요소의 생성 */
                        var ul = $("<div>");
                        var li1 = $("<p>").html(title);
                        var li2 = $("<p>").html(time);
                        var li3 = $("<p>").html(teacher);
                        
                    ul.append(li1).append(li2).append(li3);

                    $("#result").append(ul);
                    $("#result").append("<hr />")

                         }; //for문의 끝

                    },
                    error: function(xhr, textStatus, errorThrown){
                        $("div").html("<div>" + textStatus + " (HTTP-" + xhr.state + " / " + errorThrown + ")</div>" );
                    }
                });
            });
        });
		</script>

	</head>
	<body>
		<h1 class="title">$.ajax() 함수를 사용한 JSON데이터 읽기 (2)</h1>
        <div class="exec">
            <input type="button" value="JSON 데이터 가져오기" id="mybtn"/>
        </div>
        <div class="console" id="result"></div>
	</body>
</html>
      {
	"school": {
		"subject": [
			{
				"title": "Javascript+jQuery+Ajax",
				"time": "매주 월/수/금 오후 7시30분~10시20분",
				"teacher": "주영아"
			},
			{
				"title": "HTML5+CSS3 기반의 반응형 웹",
				"time": "매주 화/목 오후 7시30분~10시20분",
				"teacher": "주영아"
			},
			{
				"title": "Java 입문에서 활용까지",
				"time": "매주 화/목 오후 7시30분~10시20분",
				"teacher": "이광호"
			}
		]
	}
}

       

      셀렉터

      div.exec:eq(0) div태그중에 exec라는 클래스중에 첫번째

      div.exec:eq(1) div태그중에 exec라는 클래스중에 두번째

       

       

      <!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>article</title>

		<!-- 모바일 웹 페이지 설정 -->
		<link rel="shortcut icon" href="img/icon.png" />
		<link rel="apple-touch-icon" href="img/icon.png" />
		<!-- 모바일 웹 페이지 설정 끝 -->

		<!--[if lt IE 9]>
		<script src="js/html5shiv.js"></script>
		<![endif]-->

		<!-- 공통 css -->
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<!-- jQuery Framework 참조하기 -->
		<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
		<!-- plugin 참조 -->
		<script type="text/javascript" src="plugins/tmpl/jquery.tmpl.min.js"></script>

		<style type="text/css">
			table {
				display: block;
				width: 100%;
				font-size: 14px;
				text-align: center;
			}

			table tr:after {
				content: '';
				display: block;
				float: none;
				clear: both;
			}

			table .left {
				text-align: left;
			}

			thead, tbody, tr {
				display: block;
				width: 100%;
			}

			td, th {
				display: block;
				float: left;
				padding: 10px 0;
			}

			table thead {
				border-bottom: solid 2px #285E8E;
				font-weight: bold;
			}

			table tbody tr {
				border-bottom: 1px dotted #ccc;
			}

			.example table .no {
				width: 10%;
			}

			.example table .subject {
				width: 60%;
			}

			.example table .hit {
				width: 10%;
			}

			.example table .date {
				width: 20%;
			}
		</style>
		
		<!-- 템플릿으로 사용할 HTML태그 -->
		<script id="itemTemplate" type="text/x-jquery-tmpl">
            <tr>
                <td class="no">${no}</td>
                <td class="left subject">${subject}</td>
                <td class="hit">${hit}</td>
                <td class="date">${date}</td>
            </tr>
        </script>
		<!--// 템플릿 끝 -->


		<!-- 사용자 스크립트 블록 -->
		<script type="text/javascript">
			$(function(){
                /**get방식으로 json데이터의 요청*/
                $.get("ajax/json/bbs.jsp", {}, function(json){
                    //결과가 전달되는 파라미터에 읽어온 데이터가 담겨 있으며,
                    //JSON이므로 별도의 추출 과정 없이 점(.)으로 데이터 계층을 연결하여 사용할 수 있다.

                    /**제목, 내용, 천제 글 수를 화면에 출력*/
                    $("h1.title").html(json.title);
                    $("div.exec:eq(0)").html(json.description);
                    $("div.exec:eq(1) > span").html(json.total);

                    //글 항목을 담고 있는 배열을 템플릿에 통채로 지정
                    var tmpl = $("#itemTemplate").tmpl(json.item);
                    //화면에 출력
                    $("div.example > table > tbody").append(tmpl);
                });
            });
		</script>
	</head>
	<body>
		<!--게시판 제목이 출력될 곳-->
        <h1 class="title"></h1>
        <!-- 게시판 설명이 출력될 곳-->
        <div class="exec"></div>
        <div class="exec">
            <!--게시물 수 출력될 곳 -->
            총 게시물 수 : <span></span>개
        </div>
        <div class="example">
            <table>
                <thead>
                    <tr>
                        <th class="no">번호</th>
                        <th class="subject">제목</th>
                        <th class="hit">조회수</th>
                        <th class="date">작성일시</th>
                    </tr>
                </thead>
                <tbody>
                    <!--목록이 출력될 곳 -->
                </tbody>
            </table>
        </div>
	</body>
</html>
      {
	"title": "Javascript + jQuery + Ajax 완벽가이드",
	"description": "그린IT학원에서 진행중인 Javascript 강의 학생용 자료 입니다. 각 게시판의 다운로드 권한은 매 강의 개강시마다 부여됩니다.",
	"total": 4,
	"item": [
		{
			"no": "공지",
			"subject": "'Javascript + jQuery + Ajax 완벽가이드' 강의 자료실 입니다.",
			"hit": 3,
			"date": "2013.10.29"
		}, {
			"no": 3,
			"subject": "Javascript + jQuery + Ajax 완벽가이드 3일차 강의자료 입니다.",
			"hit": 6,
			"date": "2013.11.08"
		}, {
			"no": 2,
			"subject": "Javascript + jQuery + Ajax 완벽가이드 2일차 강의자료 입니다.",
			"hit": 15,
			"date": "2013.11.07"
		}, {
			"no": 1,
			"subject": "Javascript + jQuery + Ajax 완벽가이드 1일차 강의자료 입니다.",
			"hit": 19,
			"date": "2013.11.05"
		}
	]
}
      <%@ page language="java" contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" import="java.sql.*" %>
<% 

/*
create table bookboard (
		no int(7) auto_increment primary key,
		subject varchar(30),
		hit int(5),
		date datetime
		) engine=innodb default charset='uft-8';

insert into bookboard values (null, '제목1',0,now());
insert into bookboard values (null, '제목2',10,now());
insert into bookboard values (null, '제목3',20,now());
insert into bookboard values (null, '제목4',30,now());
insert into bookboard values (null, '제목5',40,now());

*/
String message="";
Class.forName("org.gjt.mm.mysql.Driver");
String url = "jdbc:mysql://localhost:3306/jspdb?useUnicode=true&characterEncoding=euckr";
String user = "jspuser";
String pswd = "1234";

Connection conn = DriverManager.getConnection(url,user, pswd);
Statement stmt = conn.createStatement();

String sql = " select count(*) from bookboard ";
ResultSet rs = stmt.executeQuery(sql);
int count = 0;
if (rs.next()) count = rs.getInt(1);

sql = " select no,subject,hit,date from bookboard ";
rs = stmt.executeQuery(sql);

int no = 0;
String subject = "";
int hit = 0;
String date = "";

%>
	{
	"title": "Javascript + jQuery + Ajax 완벽가이드",
	"description": "솔데스크에서 진행중인 Javascript 강의 학생용 자료 입니다. 각 게시판의 다운로드 권한은 매 강의 개강시마다 부여됩니다.",
	"total": <%=count%>,
	"item": [
		
<%
int cnt = 0;
String comma = "";
while (rs.next()) {
	no = rs.getInt("no");
	subject = rs.getString("subject");
	hit = rs.getInt("hit");
	date = rs.getString("date");

	if(cnt< count-1) comma="," ;
	else comma="";
		
	%>
	<%= "{ \"no\": "+no+"," %>
	<%="\"subject\": \""+subject+"\"," %>
	<%="\"hit\":"+hit+"," %>	
	<%="\"date\" : \""+date+"\"}"+comma+"" %>
	

	<%
	cnt++;
}
%>
		
	]
}

<%
rs.close();
stmt.close();
conn.close();
%>

       

      <!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>json(1)</title>

		<!-- 모바일 웹 페이지 설정 -->
		<link rel="shortcut icon" href="img/icon.png" />
		<link rel="apple-touch-icon" href="img/icon.png" />
		<!-- 모바일 웹 페이지 설정 끝 -->

		<!--[if lt IE 9]>
		<script src="js/html5shiv.js"></script>
		<![endif]-->

		<script type="text/javascript">
			var ju ={
                "name" : "주영아",
                "age" : 19,
                "gender" : "여자",
                "visual" : "이쁨"
            };

            document.write("<h1>" + ju.name +"</h1>");
            document.write("<h1>" + ju.age +"</h1>");
            document.write("<h1>" + ju.gender +"</h1>");
            document.write("<h1>" + ju.visual +"</h1>");
        </script>
	</head>

	<body></body>
</html>



      <!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>json(2)</title>

		<!-- 모바일 웹 페이지 설정 -->
		<link rel="shortcut icon" href="img/icon.png" />
		<link rel="apple-touch-icon" href="img/icon.png" />
		<!-- 모바일 웹 페이지 설정 끝 -->

		<!--[if lt IE 9]>
		<script src="js/html5shiv.js"></script>
		<![endif]-->

		<script type="text/javascript">
			function initCompany(){
                //회사 정보를 표현하는 데이터 구조를 JSON으로 정의
                // 하나의 JSON 데이터 안에는 일반 변수와 배열 데이터가 공존할 수 있다.
                var company = {
                    "name" : "(주)굿모닝컴퍼니",
                    "since" : 2013,
                    "department" : ["기획팀", "영업팀", "디자인팀", "개발팀"],
                    "biz" : ["소프트웨어개발", "통신판매업", "위치정보서비스"]
                };

                //회사이름 출력하기
                document.getElementById("name").innerHTML = company.name;

                //설립년도 출력하기
                document.getElementById("since").innerHTML = company.since;

                //주요 사업 부서를 출력하기 위하여 배열을 반복문으로 읽는다.
                var dept_li="";
                for(var i=0; i<company.department.length; i++){
                    dept_li += "<li>"+company.department[i]+"</li>";
                }
                document.getElementById("department").innerHTML = dept_li;

                //주요 사업 분야를 출력하기 위하여 배열을 반복문으로 읽는다.
                var biz_li="";
                for(var i=0; i<company.biz.length; i++){
                    biz_li += "<li>" + company.biz[i] + "</li>";
                }
                document.getElementById("biz").innerHTML = biz_li;
            }
		</script>
	</head>

	<body onload="initCompany()">
        <h1 id="name"></h1>
        <p>
            <strong>설립년도 :</strong><span id="since"></span>
        </p>
        <h2>주요 사업 부서</h2>
        <ul id="department"></ul>
        <h2>주요 사엽 분야</h2>
        <ul id="biz"></ul>
    </body>
</html>

       

      'HTML_JS(Sol) > jQuery_Ajax' 카테고리의 다른 글

      210622_1(jQuery_ajax)  (0) 2021.06.22
      210621_1(jQuery_ajax)  (0) 2021.06.21
      210617_1(jQuery_ajax)  (0) 2021.06.17
      210616_1(jQuery_ajax)  (0) 2021.06.16
      210615_2(jQuery_ajax)  (0) 2021.06.15

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바