[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>
<meta charset="utf-8" />
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(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 style="width:500px;margin:auto;margin-top:200px;">
<form id="frm">
<div>
<label>프로그래머</label><input name="programmer" id="programmer" >
</div>
<div style="margin-top:20px;">
<label>디자이너</label><input name="designer" id="designer">
</div>
<div style="margin-top:20px;">
<label>PM</label><input name="pm" id="pm">
</div>
<div style="margin-top:20px;">
<label>고객</label><input name="customer" id="customer">
</div>
<div style="margin-top:20px;">
<input id="button" type="button" value="버튼">
</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
출처: https://devbox.tistory.com/entry/jQuery-dataType속성을-이용한-JSON-데이터-가져오기?category=578062 [장인개발자를 꿈꾸는 :: 기록하는 공간]
'Javascript > jQuery' 카테고리의 다른 글
| [JQuery][TIP] 현재 엘레멘트가 보이는지 체크 (check visible) (0) | 2021.01.06 |
|---|---|
| [JQuery][TIP] Form submit 에서 동적으로 POST parameter 넘기기 (0) | 2021.01.06 |
| [jQuery] jQuery Quick API (0) | 2020.07.08 |
| [jQuery] jQuery Plugin을 이용한 form validation (0) | 2020.07.08 |
| [jQuery] $.getJSON 이용한 JSON 데이터 가져오기 (0) | 2020.07.08 |
| [jQuery] Ajax 데이터통신 기본 (0) | 2020.07.08 |
| [jQuery] 문서 준비 이벤트 (0) | 2020.07.08 |
| [jQuery] Ajax 설정 (0) | 2020.07.08 |