ajaxデータ削除javascript-フロントエンドQ&A-php.cn

ajaxデータ削除javascript

WBOY

リリース： 2023-05-09 09:16:37

オリジナル

768 人が閲覧しました

インターネットの急速な発展と IT テクノロジーの継続的な進歩に伴い、多くの Web アプリケーションで部分更新機能を実装するために 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: JavaScript コードを記述する

次に、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 を使用します。指定されたページの Button イベントをバインドするイベント。このうち、querySelectorAll メソッドと forEach メソッドは、それぞれ全削除ボタンと全データ削除ボタンを取得し、クリックイベントをバインドするために使用されます。ユーザーが削除ボタンをクリックすると、deleteData 関数が呼び出され、指定されたデータエントリを削除する DELETE リクエストが送信されます。

ステップ 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 の flask フレームワークを使用して単純な API インターフェイスを構築します。削除するデータは delete_api 関数の id パラメータで指定され、すべてのデータは delete_all_api 関数で削除されます。ここでは疑似コードのみが提供されており、読者は実際の状況に応じて特定のサーバー側コードを作成できます。

概要

この記事では、JavaScript と Ajax テクノロジを使用してデータを削除する方法を紹介し、参考としてフラスコベースの疑似コードも提供します。実際の開発では、特定のニーズに応じて対応するコードを記述する必要があり、セキュリティ、パフォーマンス、ユーザーエクスペリエンスなどの問題に注意を払う必要があります。 ajax テクノロジーを合理的に使用することで、ユーザーによりスムーズで優れた WEB エクスペリエンスを提供し、自社の開発効率とコード品質を向上させることができます。

以上がajaxデータ削除javascriptの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。