[jQuery] dataType속성을 이용한 JSON 데이터 가져오기

dataType속성을 이용한 JSON 데이터 가져오기

1. 다운로드

.json 파일 자체는 json 데이터라서 따로 변환 작업을 불요하나, 자바에서는 자바데이터를 JSON 데이터로 변환하는 작업이 필요하다. 해당작업을 하기 위해서는 아래의 jar 파일을 다운받자.

https://code.google.com/p/google-gson/downloads/detail?name=google-gson-2.2.4-release.zip에서 파일을 다운받는다.

--> 해당 JSP 파일에 <%@ page import="com.google.gson.*"%> 추가

2. 파일내용

(1) test3.html

<!DOCTYPE>

<html>

<head>

<title> jquery Ajax test </title>

$(document).ready(function(){

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

callAjax();

});

function callAjax(){

$.ajax({

type :'post',

data :{

programmer : $('#programmer').val(),

designer: $('#designer').val(),

pm : $('#pm').val(),

customer : $('#customer').val()

url : './test3.jsp',

dataType : 'json',

success: whenSuccess,

error: whenError

});

}

var html = '';

function whenSuccess(retdata){

$.each(retdata, function(index,entry){

html += '<div>';

html += '<h3>' + entry.programmer +'</h3>';

html += '<h3>' + entry.designer + '</h3>';

html += '<h3>' + entry.pm + '</h3>';

html += '<h3>' + entry.customer + '</h3>';

html += '</div>';

});

$('#ajaxReturn').html(html);

}

function whenError(){

alert("Error");

}

</script>

</head>

<body>

<div>

<label>프로그래머</label><input name="programmer" id="programmer" >

</div>

</div>

</div>

</div>

</div>

</form>

<div id="ajaxReturn">ajaxReturnOutput</div>

</div>

</body>

</html>

(2) test3.jsp

JSON 라이브러리는 다양하게 존재하는 것 같다.

하지만, 사용법은 크게 벗어나지는 않는다. 각각의 라이브러리의 메소드 이름만 조금 다를뿐 기본 동작 자체는 같다고 볼 수 있다.

이클립스에서 빨간줄 쳐진다고 당황하지 말자.!

JSONObject

- 기본구조 : {String name : Value, String name2 : Value2 ...}

JSONArray

- 기본구조 : [{String name : Value}, {String name2 : Value2} ...]

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

<%@ page import="com.google.gson.*"%>

request.setCharacterEncoding("UTF-8");

String programmer = request.getParameter("programmer");

String designer = request.getParameter("designer");

String pm = request.getParameter("pm");

String customer = request.getParameter("customer");

JsonObject JsonObject = new JsonObject();

JsonObject.addProperty("programmer",programmer);

JsonObject.addProperty("designer",designer);

JsonObject.addProperty("pm",pm);

JsonObject.addProperty("customer",customer);

JsonArray jArray = new JsonArray();

jArray.add(JsonObject);

out.print(jArray.toString());

실행결과)

3. 참조 URL

http://lssang.tistory.com/9

http://aljjabaegi.tistory.com/40

저작자표시

'Reference' 카테고리의 다른 글

[jQuery] jQuery Quick API (3)	2015.01.11
[SQL] 기본 SQL문 (0)	2015.01.04
[jQuery] jQuery Plugin을 이용한 form validation (2)	2014.12.31
[jQuery] $.getJSON 이용한 JSON 데이터 가져오기 (0)	2014.12.29
[jQuery] Ajax 데이터통신 기본 (1)	2014.12.28

'Reference' 카테고리의 다른 글

티스토리툴바