아약스 데이터 삭제 자바스크립트-프런트엔드 Q&A-php.cn

아약스 데이터 삭제 자바스크립트

WBOY

풀어 주다： 2023-05-09 09:16:37

원래의

738명이 탐색했습니다.

인터넷의 급속한 발전과 IT 기술의 지속적인 발전에 따라 많은 웹 애플리케이션에서 Ajax 기술을 사용하여 부분 새로 고침 기능을 구현함으로써 사용자 경험과 페이지 응답 속도를 향상시킵니다. 데이터를 삭제해야 하는 일부 시나리오에서는 ajax를 사용하여 삭제 작업을 수행할 수도 있으므로 전체 페이지를 새로 고칠 필요가 없으며 사용자는 페이지에서 삭제 효과를 즉시 확인할 수도 있습니다.

이 글에서는 javascript와 ajax 기술을 사용하여 데이터를 삭제하는 방법을 소개합니다.

1단계: HTML 파일 작성

먼저 로컬 또는 서버에서 HTML 파일을 만들고 기본 HTML 코드 및 관련 스타일을 작성합니다. 페이지에서 삭제 작업을 트리거하는 버튼을 설정하면 삭제해야 하는 각 데이터 항목에 해당하는 삭제 버튼이 있습니다. 또한 다음 코드와 같이 데이터 테이블을 렌더링하여 데이터를 표시해야 합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Ajax删除数据示例</title>
    <style>
      table {
          border-collapse: collapse;
          margin:auto;
      }

      th, td {
        padding: 10px;
        border: 1px solid black;
      }

      button {
          background-color: #4CAF50;
          color: white;
          padding: 10px;
          border: none;
          cursor: pointer;
          margin-top: 15px;
      }

      button:hover {
          opacity: 0.8;
      }
    </style>
  </head>
  <body>
    <h2>Ajax删除数据示例</h2>

    <table>
      <thead>
        <tr>
          <th>用户名</th>
          <th>邮箱</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>zhangsan@gmail.com</td>
          <td><button class="delete" data-id="1">删除</button></td>
        </tr>
        <tr>
          <td>李四</td>
          <td>lisi@gmail.com</td>
          <td><button class="delete" data-id="2">删除</button></td>
        </tr>
        <tr>
          <td>王五</td>
          <td>wangwu@gmail.com</td>
          <td><button class="delete" data-id="3">删除</button></td>
        </tr>
      </tbody>
    </table>

    <button id="delete-all">删除所有数据</button>

    <script src="js/ajax.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

로그인 후 복사

위 코드에서는 데이터 테이블을 사용하여 데이터를 표시하며 각 행에는 삭제 버튼이 있습니다. data-id 속성을 통해 어떤 데이터를 삭제하고 싶은지 알 수 있습니다. 그 중 전체 삭제 버튼을 누르면 모든 데이터를 한 번에 삭제할 수 있습니다.

2단계: 자바스크립트 코드 작성

다음으로 ajax.js 파일과 main.js 파일을 HTML 파일에 도입하여 각각 ajax 요청과 페이지 상호 작용 로직을 처리합니다.

ajax.js 파일의 코드는 다음과 같습니다.

function ajax(method, url, data, success, error) {
  let xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  xhr.setRequestHeader("Content-type", "application/json");
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      if (xhr.status == 200 || xhr.status == 304) {
        success(xhr.responseText);
      } else {
        error(xhr.status);
      }
    }
  };
  xhr.send(JSON.stringify(data));
}

로그인 후 복사

ajax.js 파일에는 요청을 보내고 응답을 받는 ajax 함수를 정의합니다. 그 중 method는 요청 메소드를 나타내고, url은 요청한 URL, data는 요청 매개변수, Success는 요청이 성공한 경우의 콜백 함수, error는 요청이 실패한 경우의 콜백 함수를 나타냅니다. 이 함수는 내부적으로 XMLHttpRequest 객체를 이용하여 요청을 보내고, 요청 매개변수와 콜백 함수를 설정한 후 마지막으로 send 메소드를 통해 요청을 보냅니다.

다음은 버튼 이벤트를 바인딩하고 페이지 상호 작용을 처리하는 데 사용되는 main.js 파일의 코드입니다.

function deleteData(id) {
  ajax(
    "DELETE",
    "/api/data/" + id,
    {}, // 请求参数
    function(responseText) {
      // 删除成功，刷新页面
      location.reload();
    },
    function(status) {
      // 请求失败
      console.log(status);
    }
  );
}

window.onload = function() {
  let deleteAllBtn = document.querySelector("#delete-all");
  let deleteBtns = document.querySelectorAll(".delete");
  // 删除所有数据
  deleteAllBtn.addEventListener("click", function() {
    ajax(
      "DELETE",
      "/api/data/all",
      {}, // 请求参数
      function(responseText) {
        // 删除成功，刷新页面
        location.reload();
      },
      function(status) {
        // 请求失败
        console.log(status);
      }
    );
  });
  // 删除单个数据
  deleteBtns.forEach(function(btn) {
    btn.addEventListener("click", function() {
      let id = this.getAttribute("data-id");
      deleteData(id);
    });
  });
};

로그인 후 복사

main.js 파일에서는 window.onload 이벤트를 사용하여 페이지의 버튼 이벤트를 바인딩합니다. . 그 중 querySelectorAll, forEach 메소드를 사용하여 각각 모든 삭제 버튼과 모든 데이터 삭제 버튼을 획득하고, 여기에 클릭 이벤트를 바인딩합니다. 사용자가 삭제 버튼을 클릭하면 지정된 데이터 항목을 삭제하기 위해 DELETE 요청을 보내는 deleteData 함수가 호출됩니다.

3단계: 서버 측 코드 작성

마지막으로 서버 측에 RESTful API 인터페이스를 작성하여 삭제 작업을 지원합니다. 서로 다른 서버측 언어와 프레임워크가 서로 다른 메소드를 구현하므로 여기서는 참조용 의사코드만 제공합니다.

import flask
app = flask.Flask(__name__)

@app.route('/api/data/<int:id>', methods=['DELETE'])
def delete_api(id):
   # 连接数据库并删除指定的数据
   return 'ok'

@app.route('/api/data/all', methods=['DELETE'])
def delete_all_api():
   # 连接数据库并删除所有数据
   return 'ok'

if __name__ == '__main__':
   app.run()

로그인 후 복사

위 의사코드에서는 Python의 플라스크 프레임워크를 사용하여 간단한 API 인터페이스를 구축합니다. 여기서 delete_api 함수는, id 매개변수는 삭제할 데이터를 지정하는 데 사용되며, delete_all_api 함수에서는 모든 데이터가 삭제됩니다. 여기에는 의사코드만 제공되며 독자는 실제 상황에 따라 특정 서버측 코드를 작성할 수 있습니다.

요약

이 글에서는 javascript와 ajax 기술을 사용하여 데이터를 삭제하는 방법을 소개하고, 참고용으로 플라스크 기반 의사코드도 제공합니다. 실제 개발에서는 특정 요구에 따라 해당 코드를 작성해야 하며 보안, 성능, 사용자 경험 등의 문제에 주의를 기울여야 합니다. Ajax 기술의 합리적인 사용을 통해 사용자에게 더 원활하고 더 나은 WEB 경험을 제공하고 자체 개발 효율성과 코드 품질을 향상시킬 수 있습니다.

위 내용은 아약스 데이터 삭제 자바스크립트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!