$.ajax 을 활용한 JSON 파싱
- 📕 Programing/jQuery
- 2020. 5. 13. 11:01
$.ajax() 사용 방법
- 비동기 요청 시 사용하는 방법이다.
index.jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<html>
<head>
<title>Home</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
type : 'post',
url : '/json',
data : {
name : 'kyhslam',
age : '10'
},
dataType : 'json',
success : function(data){
$.each(data,function(index , obj) {
$('body').append('<h1>' + obj.id + ' : ' + obj.name + '</h1>');
});
}
});
});
</script>
<body>
</body>
</html>
Controller
package org.kyhslam.controller;
import java.text.DateFormat;
import java.util.Date;
import java.util.Locale;
import javax.servlet.http.HttpServletRequest;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class HomeController {
private static final Logger logger = LoggerFactory.getLogger(HomeController.class);
@RequestMapping(value="/json")
public String jsonTest(HttpServletRequest request, Model model) {
String name = request.getParameter("name");
String age = request.getParameter("age");
logger.info("name === " + name);
logger.info("age === " + age);
return "json";
}
}
json.jsp
[
{
"id": "1",
"name": "Tiger Nixon"
},
{
"id": "2",
"name": "joy"
},
{
"id": "3",
"name": "young"
}
]컨트롤러에서 post방식으로 data를 보낸 것들을 컨트롤러에서 받아서 출력되는 것을 확인할 수 있다.
http://localhost:8080/ 접속하면 정상적으로 json을 가져와서 success함수를 통해 화면에 보여주는 것을 볼 수 있다.
'📕 Programing > jQuery' 카테고리의 다른 글
| [jQuery] 해당 요소의 상위요소 탐색 (0) | 2021.10.13 |
|---|---|
| [jQuery] 테이블의 선택한 열 값 가져오는 방법 (0) | 2021.08.24 |
| [jQuery] selecbox option값 자동 체크 (0) | 2020.05.25 |
| [jQuery] $.getJSON 으로 JSON 출력하기 (0) | 2020.05.12 |
| [jQuery] Document.ready , onload 실행 순서 (0) | 2020.05.11 |