매번 잘 사용하면서도 잠깐 안 쓰다 보면 잊어버리길래 정리를 해보려 한다.
Ajax 를 사용하려면 jQuery를 사용해야 한다.
<script src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"></script>Jquery 사이트에서 복사해 오면 된다 https://releases.jquery.com/
html 또는 jsp 의 <head>태그 안에 넣고 사용하자!
Ajax 구조
$.ajax({
url : "", // 이동 경로
type : "", // 대소문자 가리지 않음 - GET , POST , PUT , DELETE
async : true, // 기본값은 true , true : 비동기 , false : 동기
dataType : "", // 서버로부터 받을 데이터 타입 - text , html , json, jsonp, and script
contentType : "", // 서버로 전달할 데이터 타입 설정하지 않았을때 기본값은 application/x-www-form-urlencoded; charset=utf-8 이다
data : data, // 전달할 데이터
beforeSend : function (xhr) {
// ajax 통신 전 실행
// xhr.abort(); // ajax 중단
},
success : function (data){
// 통신 성공
},
error(e){
// 통신 실패
},
complete : function (){
// ajax 통신 후 실행
}
});
JavaScript
function testGet() {
let id = "111";
let pw = "222";
let ob = new Object();
ob.id = id;
ob.pw = pw;
$.ajax({
url : "/testtest/testtestGet",
type : "GET",
// contentType // GET 에서는 body 사용을 권장하지 않는다
dataType : "json", // json으로 받겠다
// data : {"id" : id , "pw" : pw}, // 데이터 전달 기본 형식
data : ob,
success : function (data){
if(data != null){
// {object : Object} 로 넘어오기 때문에 json 으로 변환
console.log("Get data : " + JSON.stringify(data));
}
},
error(e){
console.log("error : "+ e);
}
})
}
function testPost() {
let id = "111";
let pw = "222";
let ob = new Object();
ob.id = id;
ob.pw = pw;
$.ajax({
url : "/testtest/testtestPost",
type : "POST",
dataType : "json", // json으로 받겠다
contentType : "application/json; charset=utf-8",// json으로 전달하겠다
// data : {"id" : id , "pw" : pw}, // 데이터 전달 기본 형식
data : JSON.stringify(ob), // json으로 변환
success : function (data){
if(data != null){
// {object : Object} 로 넘어오기 때문에 json 으로 변환
console.log("Post data : " + JSON.stringify(data));
}
},
error(e){
console.log("error : "+ e);
}
})
}
Controller
import org.json.simple.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import java.util.Map;
@Controller
@RequestMapping("/testtest/*")
public class testController {
@GetMapping("/testtestGet")
@ResponseBody // json 으로 전달하려면 꼭 들어가야함
public String testtestGet(@RequestParam Map<String , Object> map) throws Exception{
// @RequestParam Map<String , Object> map 은 vo가 있다면 vo로 받아도 된다.
System.err.println("Get : "+ map.toString());
// 서버를 정상적으로 갔다왔는지 확인하기 위한 추가 데이터
map.put("Get Test" , "TestGet");
// json으로 변환
JSONObject js = new JSONObject(map);
return js.toString();
}
@PostMapping("/testtestPost")
@ResponseBody // json 으로 전달하려면 꼭 들어가야함
// @RequestParam 이 아닌 @RequestBody 다 , contentType 에 json 을 설정하였고 전달하는 data 또한 json으로 변환하여 보냈기 때문
public String testtestPost(@RequestBody Map<String , Object> map) throws Exception{
// @RequestBody Map<String , Object> map 은 vo가 있다면 vo로 받아도 된다.
System.err.println("post : "+ map.toString());
// 서버를 정상적으로 갔다왔는지 확인하기 위한 추가 데이터
map.put("Post Test" , "TestPost");
// json으로 변환
JSONObject js = new JSONObject(map);
return js.toString();
}
}
'개발 > Spring' 카테고리의 다른 글
| [SpringBoot] 카카오(다음) 주소 API 적용하기 (0) | 2024.07.09 |
|---|---|
| [SpringBoot] Swagger 적용하기(SpringBoot 3.x.x 이상) (0) | 2024.07.05 |
| [SpringBoot] Interceptor 구현하기 (0) | 2024.06.18 |
| [SpringBoot] Gradle + React 같이 빌드하기 (0) | 2024.06.17 |
| [SpringBoot] WebSocket 채팅 테스트 (0) | 2024.06.09 |
댓글