TestSpringAjax.zip* 파일import시에 .js파일에서 에러가 있다고 빨갛게 뜨지만 무시해도 돌아감!
Ajax의 자세한 설명은 생략한다!....
Ajax와 Json의 연동은 다른 블로그 및 책에서 자주나온다.
그러기에 나는 다르게 Ajax를 이용하여 화면의 일부분만을 변환하기로 해본다. Why? 처음에는 그냥했는데.. Spring Form Tag를 사용하여 form 체크를 한경우 <jsp:include>사용하면 페이지를 읽어오지를 못하더라!!!!! 그래서 이렇게 했다.. 다른방법이 안떠올라서 이걸썻다.
간단간단 만들거(걍 봐도그만 안봐도그만)
1. jquery를 사용하기 위해 jquery-1.8.3.min.js resources의 js폴더에 파일에 추가한다.
2. ajax.js파일을 만들고 소스코드작성
3. main.jsp에 js을 사용하기위해 스크립트를 추가한다.
<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.8.3.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/js/ajax.js"/>"></script>
주의사항으로 위의경우는 jstl의 <c:를 사용하였다. 그러므로
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %> 를필이 추가하여야한다.
3.url을 controller에서 매핑하여 결과값을 ajax.js의 success를 통해 반환한다.
4. 반환된 결과값을 이용하여 전환될 화면을 띄운다.
그럼 시작!
1. main.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27 |
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Ajax 예제</title>
</head>
<!-- jquery lib add -->
<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.8.3.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/js/ajax.js"/>"></script>
<body>
<input type="button" value="화면1" onclick="sendAjax('ajaxView1')"><br>
<input type="button" value="화면2" onclick="sendAjax('ajaxView2')"><br>
<hr>
<!-- 새로운 View를 표시하기 위한위치. -->
<div id="changeView"></div>
<div id="changeView2"></div>
</body>
</html> |
2. ajax.js 작성
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
var sendAjax = function(url) {
var postString = "";
$.ajax({
type: "POST",
url: url,
data: postString, //post 형식 전송형태 data: {인자명 : 데이터, num:num},
success: function(msg) {
//body 태그 안에서 div로 innerHTML을 적용한 영역을 지정하고
//버튼 클릭시 지정한 영역에 HTML을 삽입한다.
document.getElementById("changeView").innerHTML = msg;
}
});
}; |
3. Controller 에서 보내는 뷰페이지가 .js파일에 success의 msg로 출력된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29 |
package com.test.ajax;
import java.util.Locale;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class AjaxController {
private static final Logger logger = LoggerFactory.getLogger(AjaxController.class);
@RequestMapping(value = "/ajaxView1", method = RequestMethod.POST)
public String vew1(Locale locale) {
logger.info("ajaxView1", locale);
return "view1";
}
@RequestMapping(value = "/ajaxView2", method = RequestMethod.POST)
public String view2(Locale locale) {
logger.info("ajaxView2", locale);
return "view2";
}
}
|
4. 보여줄 다른 view인 view1.jsp , view2.jsp 작성한다 여기는 생략.
끝! 결과화면은 뭐 그냥 버튼 클릭시 div의 위치로부터 view1 또는 view2페이지의 내용이 나온다. 대강만든거라 보이기 민망하다.
- 추가 - 2014.01.03
이렇게 하면 i프레임 추가해서 하는거와 사실 별반 다를게없다.. 예전부터 뭔가 이상하다 생각했는데 이제서야 그 결과를 알았다 ㅋㅋㅋㅋㅋ 다음에는 xml혹은 java에서 값을 바로 화면으로 뿌려야겠다...
'Spring' 카테고리의 다른 글
| weblogic 사용시 Spring Form Tge 에러 (0) | 2013.11.18 |
|---|---|
| Spring Redirect (0) | 2013.11.13 |
| jQuery 사용방법 (0) | 2013.10.18 |
| Controller redirect data 전송 (0) | 2013.10.16 |
| Spring Mybatis를 이용한 우편(post)검색 (0) | 2013.10.15 |