- 기본적인 Ajax 선언 방식 - javascript + jquery
- data : $("#id").serialize() - 이런식으로 value값을 직접 넣어줄수도 있음
1
2
3
4
5
6
|
$.ajax({
url:"값을 전송할 URL",
type:"POST",//전달방식
data:json_data, // {“user_id”:”입력값”, “user_password”:”입력값”}
형식으로 전달 됨
dataType:"json"// text,json 등으로 선언가능
});
| cs |
- Json data를 Ctrl로 전달하기
- JSON.stringify() 메서드를 이용해서 json 형식으로 변환
- data : " 객체명 = " - Ctrl에 parameter로 받을 이름
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
//Json 데이터
var obj = [{name:"태연",role:"리더"},{name:"서현",role:"막내"}];
//데이터를 더 추가해서 보내줄수도 있음
obj.push({name:$("#name").val(),role:$("#id").val()});
var json_data = JSON.stringify(obj); //오브젝트를 JSON형식으로 변환
$.ajax({
url:"test.do?key=ajax",
type:"POST",
//id : ctrl에서 받을 객체 명
data:"id="+json_data, //{“name”:”입력값”, “role”:”입력값”}형식으로 전달 됨
dataType: "JSON",
success:function(data){//성공적으로 통신했을 경우 ( data )에
//ctrl에서 보낸값이 들어옴
$.each(data,function(index,mem){
$("#show").append("<h2>"+mem.name+"은 "+mem.role+"</h2>");
})
},
//통신에 실패 했을시 error메세지와 함께 error코드를 출력
error:function(request,status,error){
alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
}
});
| cs |
- Ctrl 단 - 값을 받기
1
2
3
4
5
6
7
8
9
10
11
|
@RequestMapping(value="/test.do",params="key=ajax")
public ModelAndView mavtest2(String id){
ModelAndView mav = new ModelAndView();
// data에 넣어 줫던 값이 parameter로 들어옴
System.out.println("ajax? : " +id);
mav.setViewName("jsonView");
return mav;
}
| cs |
- 출력 화면
1
2
|
ajax? : [{"name":"태연","role":"리더"},
{"name":"서현","role":"막내"},{"name":"","role":""}]
| cs |
- Ctrl단 - 받은 json데이터를 그대로 다시 json 데이터로 바꿔서 view단으로 전송
- jsonObject.put ( key , value ) - key 값이 같을시 Map형식 처럼 기존의 값에 덮어 씌워짐
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
|
@RequestMapping(value="/test.do",params="key=ajax")
public ModelAndView mavtest2(String id){
ModelAndView mav = new ModelAndView();
//파싱을 위한 parser
JSONParser jsonParser = new JSONParser();
//넘어갈 jsonObject
JSONObject jsonObject = new JSONObject();
//넘어온 값이 하나가 아닌 배열이기때문에 배열화 필요
JSONArray jsonArray = new JSONArray();
try {
//받아온 값을 Json 배열화
jsonArray = (JSONArray) jsonParser.parse(id);
for ( int i = 0; i <jsonArray.size() ; i++){
//배열을 돌면서 그 값들을 JsonObject에 저장
//jsonObject.put ( key ,val )
jsonObject.put(i+"",(JSONObject)jsonArray.get(i));
}
} catch (ParseException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//jsonObject를 add
mav.addAllObjects(jsonObject);
mav.setViewName("jsonView");
return mav;
}
| cs |
- 실행 결과
- 객체 하나 더해 주기 - 잘못 된 방식
1
2
3
4
5
6
|
JSONObject addJson01 = new JSONObject();
addJson01.put("name", "Tiffany");
addJson01.put("role", "Happiness");
mav.addAllObjects(addJson01);
| cs |
- 결과
- 객체로 넘어가지 못함..
- 객체 하나 더해 주기 - 옳은 방식
1
2
3
4
5
6
7
8
9
10
|
JSONObject addJson01 = new JSONObject();
//JsonObject를 하나 더생성
JSONObject jsonObject2 = new JSONObject();
addJson01.put("name", "Tiffany");
addJson01.put("role", "Happiness");
//만든 Obj를 다시한번 더해줌
jsonObject2.put(4+"", addJson01);
mav.addAllObjects(jsonObject2);
| cs |
- 결과
- 4번째 객체가 생성
- ArrayList 를 넣어주기..
1
2
3
4
5
6
7
8
9
|
ArrayList<Member> mem = new ArrayList<Member>();
mem.add(new Member("이름 1 ", "권한 1"));
mem.add(new Member("이름 2 ", "권한 2"));
mem.add(new Member("이름 3 ", "권한 3"));
//JsonArray에 ArrayList를 add
jsonArray.addAll(mem);
//jsonArray를 통째로 Object에 put
jsonObject.put("mem", jsonArray);
| cs |
- 결과
- ArrayList가 Array형태의 객체로 넘어옴
- view단에서 사용
- 이름1 이 찍힘
1
2
3
|
success:function(data){
alert( data.mem[0].id);
})
| cs |
댓글 없음:
댓글 쓰기