jQuery를 이용해서 Ajax처리한 결과를 Json타입으로 받기

 

// 클라이언트 jQuery 코드

 

$.ajax({

type:"post", //http를 요청하는 방식 GET,POST뿐만 아니라  브라우저 지원에 따라 PUT, DELETE도 가능함.

async:true,

url:"login.do",

dataType :"json", //서버로 부터 전송받을 데이터의 타입(xml, json, html, script, JSONP, Text)

timeout: 1000,  //milliseconds

data : 'a='+a+'&b='+b,  // 서버로 전송할 파라메터 데이터.. $("#formId").serialize() 로도 가능

success : function(jsonData, textStatus, jqXHR){

alert(jsonData["result"]);},

error : function(jqXHR, textStatus, errorThrown){

alert(textStatus);

},

beforeSend:function(){

//ajax 요청 보내기 전 처리

},

complete:function(jqXHR, textStatus){

//ajax 완료후 처리

}

 

});

 

 

아래 서버측 코드는 스트러츠1을 이용한 방법이다. struts2에 대한 부분은 많은데, 1에 대한 부분은 없는듯 하다.

서버측 코드에서 Gson을 이용해서 json 데이터 보내기

 

        Map<String, Object> object1 = new HashMap<String ,Object>();
        object1.put("result", "성공");
        
        response.setContentType("application/json"); // 이 코드는 없어도 결과는 정상적으로 나옴.
        response.setCharacterEncoding("utf-8"); // 한글처리를 위해서 있어야 함.
       
        response.getWriter().write(new Gson().toJson(object1));

 

//text 형태는 setContentType 만 변경하고 데이터를 넘겨주면 끝.

 

response.setContentType("text");

response.getWriter().print("This is Text result");

 



발췌  : Ajax Programming 기초부터 중급까지 - 가메출판사, 최범균

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
 <meta http-equiv="content-type" content="text/html; charset=euc-kr" />
 <title>CSS Class 변경</title>
 <script type="text/javascript" src="ajax.js"></script>
 <script type="text/javascript">
 window.onload = function() {
  var redRadio = document.getElementById("red");
  var blueRadio = document.getElementById("blue");
  var blackRadio = document.getElementById("black");
 
  ajax.Event.addListener(redRadio, "click",
   ajax.Event.bindAsListener(doClickOnRadio, redRadio));
  ajax.Event.addListener(blueRadio, "click",
   ajax.Event.bindAsListener(doClickOnRadio, blueRadio));
  ajax.Event.addListener(blackRadio, "click",
   ajax.Event.bindAsListener(doClickOnRadio, blackRadio));
 }
 
 function doClickOnRadio() {
  var view = document.getElementById("view");
  alert(this.value);
  view.className = this.value;
 }
 
 function fncChangeBlue()
 {
  var view = document.getElementById("myView");
  view.className = 'myBlack';
 }
 </script>
 <style type="text/css">
 div.red {
  font-weight: bold;
  color: red;
  background-color: #00FFFF;
 }
 div.blue {
  font-weight: bold;
  color: blue;
  background-color: #FFFF00;
 }
 div.black {
  font-weight: bold;
  color: #000000;
  background-color: #CCCCCC;
 }
 .myBlack {
  font-weight: bold;
  color: #000000;
  background-color: #CCCCCC;
 }
 </style>
</head>
<body>
<div id="view" class="black">스킨을 변경해보세요.</div>
<form name="f">
<input type="radio" name="skinName" id="red" value="red" />RED
<input type="radio" name="skinName" id="blue" value="blue" />BLUE
<input type="radio" name="skinName" id="black" value="black" checked="checked" />BLACK
<div id="myView">
<a href="javascript:fncChangeBlue()">변경하기.</a>
</div>
</form>
</body>
</html>