AJAX를 통한 삭제 기능

ajax란 ?

 

• 비동기성: 전체 페이지를 다시 로드하지 않고, 필요한 데이터만 서버에 요청하고 응답을 받습니다. 사용자는 페이지가 계속 표시된 상태에서 서버와의 통신이 이루어집니다.
• 데이터 교환: JSON, XML, HTML, 또는 일반 텍스트 형식으로 데이터를 서버에서 받아올 수 있습니다. 요즘에는 주로 JSON 형식을 사용합니다.
• 자바스크립트 사용: AJAX 요청과 응답 처리는 자바스크립트를 통해 이루어집니다. 자바스크립트는 서버와 HTTP 요청을 보내고, 응답을 처리하여 페이지에 업데이트하는 역할을 합니다.
• 브라우저 지원: 거의 모든 최신 웹 브라우저가 AJAX를 지원하며, 다양한 웹 애플리케이션에서 널리 사용됩니다.

 

gpt 참고

 

페이지를 다시 로드하지 않고 비동기적으로 서버와 통신한다

주로 JSON 형식을 사용하고

 

JSON

key value 값으로 구성된 객체로 이루어진 배열

ex>

{
  "name": "John",
  "age": 30,
  "city": "Seoul"
}

 

또 자바스크립트를 사용해서 이루어진다

 

ajax를 통해 리스트의 항목을 삭제해보자

<div>
    <h4 th:text="${item.title}"></h4>
    <p th:text="${item.price}"></p>
    <a th:href="@{'/modify/' + ${ item.id } }">
        <button >수정</button>
    </a>
    <button class="delete_btn">삭제</button>
</div>

일단 삭제버튼 생성

 

community 무료버전은 스크립트가 안된다고 한다

그래서 30일 무료체험버전 다운로드해서 해야될듯 하다