⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐
@ResponseBody
값을 다시 되돌려 보낼땐 이걸 꼭 mapping 아래 작성 해야함!!!!!!!
❗
post : data를 front에서 보내고 다시 돌려받을게 없는 경우
get : 주고 받아서 front에서 출력해야하는 경우엔 필히 get 사용
❗ ajax 통신 - CORS방식 무조건 넣어줘야함! (CORS 무조건 핸들링해야함)
@CrossOrigin(origins="*", allowedHeaders = "*")
👀 @GetMapping
- jsp
<body>
<input type="button" value="클릭" id="btn">
</body>
<script>
$(function(){
$("#btn").click(function(){
var $data = new Array();
$data[0] = "20";
$data[1] = "30";
$data[2] = "40";
//console.log($data); //배열 출력
//console.log($data.join(",")); //20,30,40 문자로 출력
$.ajax({
url:"./ajaxok.do",
cache:false,
dataType:"json", //or text
contentType:"application/json",
type:"get",
data:{
//key
"all_data":$data.join(",")
},
success:function($result){
console.log($result)
},
error:function(){
console.log("에러발생")
}
});
});
})
</script>
=> join : JSON.stringfy 형태로 변화
- controller
@CrossOrigin(origins="*", allowedHeaders = "*")
@GetMapping("/ajaxok.do")
public String ajaxok(
@RequestParam(value="all_data") List<String> alldata,
HttpServletResponse res
) throws Exception{
//requestparam의 value는 꼭 front 에서 data: 에 key 작성한 대로 받아야함
//List 변수명은 달라도 상관 없음
System.out.println(alldata); //[20, 30, 40]
System.out.println(alldata.get(0)); //20
this.pw = res.getWriter();
//-- front에서 dataType:json으로 받는 경우
JSONObject jo = new JSONObject();
jo.put("result", "ok");
this.pw.print(jo);
//-- front에서 dataType:text으로 받는 경우
//this.pw.print("ok");
return null;
}
@RequestParam
배열을 이용하여 대표키로 전달 또는 대표키 없이 보조키로 전달 될 경우 사용 가능
requestparam의 value는 꼭 front 에서 data: 에 key 작성한 대로 받아야함 ( List 변수명은 달라도 상관 없음 )
=> get으로 주고 받을 경우
@RequestBody
: post일 때 @RequestBody를 넣으면 날라옴
: JSON기반일 경우에 사용 (contentType:"application/json" 일 때) => json이 아니면 RequestParam
@ResponseBody
: 미디어타입 형태일 경우 (ajax로도 파일을 전송할 수 있다!) / 파라미터타입 형태일 경우
: 단 , 절대 인자값 위치에 선언하지 않음 ( public String test( 여기들어오면 안됨 ){} ) => 별도로 빼세욤
👀 @PostMapping
- jsp
<body>
<input type="button" value="클릭" id="btn"><br><br>
<input type="button" value="post_ajax" id="btn2">
</body>
<script>
$("#btn2").click(function(){
var $data = new Array();
$data[0] = "홍길동";
$data[1] = "강감찬";
$data[2] = "이순신";
$.ajax({
url:"./ajaxok2.do",
type:"post",
cache:false,
dataType: "json",
contentType:"application/json",
data:JSON.stringify({
"all_data":$data
}),
success:function($result){
console.log($result);
},
error:function(){
console.log("에러발생")
}
})
})
</script>=> JSON.stringfy : Object 형태로 전달
- controller
@CrossOrigin(origins = "*", allowedHeaders = "*")
@PostMapping("/ajaxok2.do")
public String ajaxok2(@RequestBody String all_data,HttpServletResponse res) throws Exception{
res.setContentType("text/html;charshet=utf-8");
this.pw = res.getWriter();
//System.out.println(all_data);
/* 1. (@RequestBody String all_data) 일 경우
System.out.println(all_data);
{"all_data":["홍길동","강감찬","이순신"]} =>jsonObject로 뜯을수 있다(key : all_data)
=> 이걸 배열로 뜯으려면 (JSONArray)로 받아야함;
*/
JSONObject jo = new JSONObject(all_data);
//System.out.println(jo.get("all_data")); //["홍길동","강감찬","이순신"]
JSONArray ja = (JSONArray)jo.get("all_data");
//이렇게 받아야 back에서 array 핸들링 가능(그냥 jo.get("all_data") 이걸로는 get으로 안받아짐 )
System.out.println(ja.get(0)); //홍길동
//front에서 dataType:json으로 받겠다고 해서 json으로 보내줘야함
JSONObject result = new JSONObject();
result.put("result","ok"); //잘 받았다
this.pw.print(result);
return null;
}=> @RequestBody 로 받은 이유 : front에서 JSON.stringfy 로 보냈기 때문에
⭐⭐ ⭐⭐ ⭐⭐ ⭐⭐
=> front에서 JSON.stringfy 로 보내진 {"all_data":["홍길동","강감찬","이순신"]}
저 key 배열 형태로 받은 JSONObject를 ja로 옮겨담아야 ( (JSONArray) 로 형변환 )
get(0) 등으로 진짜 배열로써 핸들링 할 수 있다!
👀 json배열 응용
- test1
/**/
- test1
/**/
- test1
/**/
👀 숙제
'CLASS > AJAX' 카테고리의 다른 글
| AJAX 정리-2 (javascript,ECMA,jquery,axios / async~await) (0) | 2024.09.27 |
|---|---|
| AJAX 정리-1 (0) | 2024.09.27 |
| #5-6 / ECMA - Ajax 데이터 로드 (0) | 2024.07.19 |
| #5-5 / Javascript- Ajax 데이터로드(database+인증키 사용) (0) | 2024.07.19 |
| #5-4 / Jquery Ajax & 외부 서버 통신(CORS) (0) | 2024.07.19 |