AJAX 기본 구조
아래는 ajax의 기본 문법이다.
$.ajax({ 자바스크립트 오브젝트 }).done(() ⇒{성공시 로직}).fail({실패시 로직});’
위와 같은 구조이고, 코드 작성시에는 아래처럼 작성해주면 된다.
되게 자주 쓰는 문장이므로 코드스니펫을 설정해주면 아주 사용하기 편하다.
$.ajax({ 자바스크립트 오브젝트 }).done(() ⇒{성공시 로직}).fail({실패시 로직});’
위와 같은 구조이고, 코드 작성시에는 아래처럼 작성해주면 된다.
되게 자주 쓰는 문장이므로 코드스니펫을 설정해주면 아주 사용하기 편하다.$.ajax({
url: "",
type: "",
data: "",
contentType: "",
}).done(( )=>{
}).fail(( )=>{
});
JavaScript
복사
AJAX 코드 스니펫 custom 추가하는 방법은 여기에
네, 제시하신 코드는 jQuery를 사용한 AJAX 요청의 기본적인 구조를 나타냅니다. 여기서 사용된 각 속성과 메서드에 대해 설명드리겠습니다:
1.
url: 요청을 보낼 서버의 URL입니다. 여기에는 데이터를 요청하거나 보낼 서버의 경로를 입력합니다.
2.
type: HTTP 요청 메서드를 나타냅니다. 일반적으로 'GET', 'POST', 'PUT', 'DELETE' 등이 사용됩니다.
3.
data: 서버에 보낼 데이터입니다. 이 속성은 주로 'POST'나 'PUT' 요청에 데이터를 첨부할 때 사용됩니다.
4.
contentType: 요청의 콘텐츠 타입을 나타냅니다. 예를 들어, JSON 형식의 데이터를 보낼 때는 'application/json; charset=utf-8'을 사용합니다.
5.
done((res)): 요청이 성공적으로 완료되었을 때 실행될 콜백 함수입니다. res 매개변수는 서버로부터의 응답 데이터를 담고 있습니다.
6.
fail((res)): 요청이 실패했을 때 실행될 콜백 함수입니다. res 매개변수는 실패에 대한 정보를 담고 있습니다.
이 기본 구조를 바탕으로 실제 요청을 구현할 때는 url, type, data, contentType 등의 속성을 요청의 목적과 서버의 API 사양에 맞게 적절히 설정해야 합니다. 예를 들어, 간단한 GET 요청의 경우 data와 contentType은 필요 없을 수 있습니다.
$.ajax({
url: "/api/boards", //서버가 같으면 8080뒤에 있는 주소는 뒤에 것만 적어도 됨
type: "get" // poset면 컨텐트타입, 데이터가 추가로 들어감
}).done((res) => { // 정상(200)이면 done->바디 데이터
console.log("통신 성공");
console.log(res);
// for(board of boardList){}도 가능하나 stream api를 쓰는 것이 좋음
let boardList = res.body;
boardList.forEach((board)=>{
$("#board-box").append(render(board));
});
}).fail((res) => {
//console.log(res);
alert(res.responseJSON.msg);
location.href="/loginForm";
}); // 실패면 다 fail
JavaScript
복사
contentType 매우 중요!
AJAX의 default값이고 이걸 이용해서 JSON타입으로 변환 해줄 수 있따.
data
JavaScript Object타입 → 키값에 쌍따옴표가 없기 떄문에
URLsafe작성
?/ =/ &는 브라우저가 인식을 못하기 때문에 쓰면 안된다.
id를 설정한다.
향후 id가 없으면 삭제하기 매우 곤란해지기 때문에
BoardApiController구현
ApiUtil 클래스 만들기
JSON을 받을 수 있는 API만들기 →
데이터로 응답하는 컨트롤러 → API 컨트롤러
AJAX를 위한 컨트롤러이고 보통 따로 만든다.
데이터로 응답하는 컨트롤러 → API 컨트롤러
AJAX를 위한 컨트롤러이고 보통 따로 만든다.boardList.size()로 받으면 통신이 실패인지 아닌지 확신하지 못한다.
status로 통신의 결과로 사용해야지 명확하다.
실패했을때도 실패메시지를 주는 것이 좋다.
상태코드로 실패했을때 메시지를 확인하면 될 것 같다.
실패했을때도 실패메시지를 주는 것이 좋다.
상태코드로 실패했을때 메시지를 확인하면 될 것 같다.•
헤더에도 있는데 왜 바디데이터로 메시지를 담아야 될까?
◦
프론트에서 어떤 에러가 발생했는지 상세하게 알아야된다.
•
new를 하면서 타입을 알 수 있을때는, Object를 안쓰고 제네릭을 쓰면 된다.
•
스프링이 Object타입을 자동으로 Json으로 변환한다.
◦
언제? @RestController가 붙던지 @ResponseBody가 붙던지
$.ajax({}).done(()=>{정상시 여기실행}).fail(()=>{실패시 여기 실행});
JavaScript
복사
\
rendering 함수
function render(board) {
return `
<tr id = "board-${board.id}">
<td>${board.id}</td>
<td>${board.title}</td>
<td>${board.content}</td>
<td>${board.author}</td>
<td>
<div class="d-flex">
<button onclik="del(${board.id})" class="btn btn-danger">삭제</button>
<form action="/board/${board.id}/updateForm" method="get">
<button class="btn btn-warning">수정</button>
</form>
</div>
</td>
</tr>`;
}
JavaScript
복사
ajax코드 스니펫
$.ajax({
}).done((res)=>{
}).fail((res)=>{
});
JavaScript
복사
새로고침하는 코드
location.reload(); //f5
JavaScript
복사
•
프론트에서 어떤 데이터를 받고 싶은지 소통, json데이터면 폼태그 필요없다.
•
$(”#author) 로 ajax로 찾을 수 있다. 이제 id를 정하는게 중
function wrtie (){
alert("클릭되나?");
}
JavaScript
복사
•
폼태그 내부에 버튼은 디폴트가 sumbit이고 버튼이 클릭되면 action이 발동한다.
◦
onclick=”함수()” 로 동작 바인딩
•
자바스크립트 요청에 페이지로 응답하면 안된다!!!!
•
DB테스트 하고 실패하는 것도 해보
1.
인풋태그 값들고가기
2.
들고온 값 Json 변경하기
3.
Ajax요청
4.
실패 경우/ 성공의 경우 (→ 메인페이지 리다이렉션)
json.stringify
json으로 변환해주는 코드
let board = {
title : $("#title").val(),
content : $("#content").val(),
author : $("author").val
};
JavaScript
복사
•
PutMapping 자체가 업데이트할 때 사용이 되므로 중복해서 적을 필요가 없다. 그래서 @PutMapping("/api/boards/{id}") 이렇게 표현이 가능하다.
•
화면 데이터는 자주 바뀔수 있기 때문에 변덕 스럽다.