2013. 11. 6. 16:36 COMPUTER/JAVA, JSP
[SPRING,JAVA] 프레임워크에 Ajax사용을 위한 JsonView 설정하기, Spring Framework JsonView Ajax Sample

JSON뷰를 이용하여 AJAX를 사용할 수 있게 설정하는 방법입니다.

예제는 전자정부 프레임웤으로 했습니다.

사실 pom.xml과 dispatcher에는 기본적으로 등록되어있었습니다.

다른 스프링기반 프레임웤들은 직접 추가해주시면 됩니다.


pom.xml
<dependency>        
	<groupId>net.sf.json-lib</groupId>        
	<artifactId>json-lib</artifactId>        
	<version>2.4</version>        
	<classifier>jdk15</classifier>    
</dependency>

<dependency> 
	<groupId>org.codehaus.jackson</groupId> 
	<artifactId>jackson-mapper-asl</artifactId> 
	<version>1.6.4</version> 
</dependency>

DispatcherServlet XML 설정파일
<bean class="org.springframework.web.servlet.view.BeanNameViewResolver" id="viewResolver" p:order="0"/>
<bean class="org.springframework.web.servlet.view.json.MappingJacksonJsonView" id="jsonView">
	<property name="contentType" value="application/json;charset=UTF-8"/>
</bean>

web.xml
<servlet-mapping>
	<servlet-name>action</servlet-name>
	<url-pattern>*.do</url-pattern>
</servlet-mapping>
<servlet-mapping>
	<servlet-name>action</servlet-name>
	<url-pattern>*.ajax</url-pattern>
</servlet-mapping>

TestController.java
@RequestMapping("/test.do")
public String test(@ModelAttribute("searchVO") CommentVO commentVO, ModelMap model) throws Exception {
	return "test/test";
}

@RequestMapping("/test.ajax")
public ModelAndView testAjax(@ModelAttribute("searchVO") CommentVO commentVO, ModelMap model) throws Exception {

	Map resultMap = new HashMap();
	resultMap.put("result1", "test1");
	resultMap.put("result2", "test222");

	ModelAndView modelAndView = new ModelAndView("jsonView",resultMap);
	return modelAndView;
}

test.jsp
<script type="text/javascript">
<!--

$.post("${pageContext.request.contextPath}/test.ajax",
	{
		test1: "1111",
		test2: "2222"
	},
	function(data) {
		alert("result: " + data);
	}
);

-->
</script>




END


2012. 1. 4. 22:54 COMPUTER/JAVASCRIPT, JQUERY
[JQuery/JS] 셀렉트박스 변경할때 글 읽어오기, Selectbox onChange Ajax


$('#[아이디]').change([함수명]=function(){
$.ajax({
url:'[주소]',
data:'변수명='+$(this).val(),
dataType:'json',
success:function(data){
if(!data.data || data.data=='' || data.data.length<1) return false;
$('#[대상]').html(data.[컬럼명]);
},
}); // $.ajax
});



SCRIPT

$('#boardDivnCd').change(changeBoardDivnCd=function(){
$.ajax({
url:'<c:url value="/0001/selectGftctPupl.do" />',
data:'boardDivnCd='+$(this).val(),
dataType:'json',
success:function(data){
if(!data.data || data.data=='' || data.data.length<1) return false;
$('#content').html(data.data[0].CONTENT);
},
}); // $.ajax
});


HTML

<select id="boardDivnCd" name="boardDivnCd">
<option value="55">일반게시판</option>
<option value="56">QnA게시판</option>
<option value="57">게시판</option>
</select>
<td id="content">내용내용내용</td>


JAVA

@RequestMapping("0001/selectGftctPupl.do")
public ModelAndView selectGftctPupl(HttpServletRequest request, HttpServletResponse response, Map<String, Object> model,0001Model 0001Model){
try{
List<DataMap> data=0001Service.selectGftctPupl(0001Model); // 데이터 조회
if(data==null || data.size()==0) return new ModelAndView("jsonView",model);
model.put("data",data);
}catch (Exception e){}
return new ModelAndView("jsonView",model);
}


2010. 10. 11. 10:01 COMPUTER/JAVASCRIPT, JQUERY
[AJAX] 기본 예제, httpRequest Sample

ajax의 가장 기본이자 핵심인 httpRequest,
함수로 만들어서 쓰면 코드를 줄일 수 있습니다.

var httpRequest=null;

function getXMLHttpRequest(){
 if (window.ActiveXObject){
  try{
   return new ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
   try{
    return new ActiveXObject("Microsoft.XMLHTTP");
   }catch(e1){ return null; }
  }
 }else if (window.XMLHttpRequest) return new XMLHttpRequest();
 else return null;
}

function sendRequest(url,params,callback,method){
 httpRequest=getXMLHttpRequest();
 var httpMethod=method ? method : 'GET';
 if(httpMethod!='GET' && httpMethod!='POST') httpMethod='GET';
 var httpParams=(params==null || params=='') ? null : params;
 var httpUrl=url;
 if (httpMethod=='GET' && httpParams != null) httpUrl=httpUrl+"?"+httpParams;
 httpRequest.open(httpMethod,httpUrl,true);
 httpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 httpRequest.onreadystatechange=callback;
 httpRequest.send(httpMethod=='POST' ? httpParams : null);
}


사용법

sendRequest("test.jsp", "attr=10&value=안두리", funcReceived, "POST");

function funcReceived() {
 if (httpRequest.readyState == 4) {
  if (httpRequest.status == 200) {
   alert(httpRequest.responseText);
  }
 }
}
2010. 10. 7. 15:48 COMPUTER/JAVASCRIPT, JQUERY
[JQUERY] JTree 사용 예제, 노드 추가/삭제

트리메뉴중에선 기능이 상당히 많은 오픈소스입니다.
데이타 타입은 html, json, xml등 거의대부분 지원합니다.
복잡한 기능을 구현하려면 jquery를 알고있는게 좋습니다. 

홈페이지: http://www.jstree.com/


예제에선 _xml_nest.xml이란 데이타 파일을 읽어들이고,
노드 추가/삭제를 할 수 있습니다.

예제 페이지 소스
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jsTree v.1.0 - full featured demo</title>
 <script type="text/javascript" src="_lib/jquery.js"></script>
 <script type="text/javascript" src="_lib/jquery.cookie.js"></script>
 <script type="text/javascript" src="_lib/jquery.hotkeys.js"></script>
 <script type="text/javascript" src="jquery.jstree.js"></script>

 <style type="text/css">
 html, body { margin:0; padding:0; }
 body, td, th, pre, code, select, option, input, textarea { font-family:verdana,arial,sans-serif; font-size:10px; }
 .demo, .demo input, .jstree-dnd-helper, #vakata-contextmenu { font-size:10px; font-family:Verdana; }
 #container { width:780px; margin:10px auto; overflow:hidden; position:relative; }
 #demo { width:auto; height:400px; overflow:auto; border:1px solid gray; }

 #text { margin-top:1px; }

 #alog { font-size:9px !important; margin:5px; border:1px solid silver; }
 </style>
</head>

<body>
<div id="demo" class="demo"></div>
<div id="menu">
<button id="addFolder">add folder</button><br/>
<button id="addItem">add item</button><br/>
<button id="deleteItem">delete item</button><br/>
</div>

<script>
$(function () {
 $("#demo").jstree({
  "xml_data" : {
   "ajax" : {
    "url" : "_xml_nest.xml"
   },
   "xsl" : "nest"
  },
  "plugins" : [ "themes", "xml_data","ui","crrm"],
  "ui" : {
   // this makes the node with ID node_4 selected onload
   "initially_select" : [ "pxml_6" ]
  }
 });
});

$(function(){
 $("#demo").bind("create.jstree", function (event, data) {
  data.rslt.obj.attr("id","testid");
  alert(data.rslt.obj.attr("id"));
 });
});

$(function(){
 $('#menu button').click(function(){
  switch(this.id){
  case "addFolder":
   //alert("addFolder");
   //$("#demo").jstree("create", null, "last", { "attr" : { "rel" : "folder" } });
   //$("#demo").jstree("create",-1,false,"CREATED NODE",false,true);
   $("#demo").jstree("create","#pxml_5","last","CREATED NODE",false,true);
   break;
  case "addItem":
   //alert("addItem");
   $("#demo").jstree("create", null, "last", { "attr" : { "rel" : "default" } });
   break;
  case "deleteItem":
   $("#demo").jstree("remove","#testid");
  default:
   break;
  }
 });
});
</script>
</body>
</html>


xml 데이타
<?xml version="1.0" encoding="UTF-8"?>
<root>
 <item id="pxml_1">
  <content><name><![CDATA[Root node 1]]></name></content>
  <item id="pxml_2">
   <content><name><![CDATA[Child node 1]]></name></content>
  </item>
  <item id="pxml_3">
   <content><name><![CDATA[zzzzzz]]></name></content>
  </item>
  <item id="pxml_4">
   <content><name><![CDATA[Some other child node]]></name></content>
  </item>
 </item>
 <item id="pxml_5">
  <content><name><![CDATA[Root node 222]]></name></content>
 </item>
 <item id="pxml_6">
  <content><name><![CDATA[menu2]]></name></content>
 </item>
 <item id="pxml_7">
  <content><name><![CDATA[kkkkkk]]></name></content>
 </item>
</root>

2010. 10. 6. 13:25 COMPUTER/JAVASCRIPT, JQUERY
[AJAX] 데이타 전송시 에러 Could not complete the operation due to error c00ce514
ajax를 구현해서 리퀘스트를 날렸는데,
Could not complete the operation due to error c00ce514
라는 자바스크립트 에러가 났으면,

제일먼저확인할것은 요청페이지와 응답페이지간의 캐릭터셋이 일치하는지 확인하세요.

만약 요청페이지는 utf-8인데 응답페이지가 euc-kr이면 에러가 날 수 있습니다.
utf-8은 파일저장방식이 유니코드인지도 확인해야합니다.


인코딩 불일치때문에 에러가 나는것이 아니라면, 응답페이지의 캐릭터셋을 변경.

응답페이지가 PHP일때 인코딩을 지정하는 코드 입니다.
header("Content-type: text/html; charset=euc-kr");
또는
header("Content-type: text/html; charset=utf-8");


최근에 올라온 글

최근에 달린 댓글