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

ホームページ

ウェブフロントエンド

フロントエンドQ&A

ajaxデータ削除javascript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 09, 2023 am 09:16 AM

インターネットの急速な発展と 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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7569

CakePHP チュートリアル

1386

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

107

Related knowledge

UseEffectとは何ですか？副作用を実行するためにどのように使用しますか？ Mar 19, 2025 pm 03:58 PM

この記事では、functionコンポーネントでのデータフェッチやDOM操作などの副作用を管理するためのフックであるReactの使用Effectについて説明します。メモリリークなどの問題を防ぐための使用、一般的な副作用、およびクリーンアップについて説明します。

usecontextとは何ですか？コンポーネント間で状態を共有するためにどのように使用しますか？ Mar 19, 2025 pm 03:59 PM

この記事では、ReactのUseContextを説明しています。これにより、小道具掘削を避けることで国家管理を簡素化します。再レンダーの削減により、集中状態やパフォーマンスの改善などの利点について説明します。

connect（）を使用して、ReactコンポーネントをReduxストアにどのように接続しますか？ Mar 21, 2025 pm 06:23 PM

記事では、Connect（）、MapStateToprops、MapDispatchToprops、およびパフォーマンスへの影響を説明するReduxストアに反応コンポーネントをReduxストアに接続します。

イベントハンドラーのデフォルトの動作をどのように防止しますか？ Mar 19, 2025 pm 04:10 PM

記事では、PreventDefault（）メソッドを使用して、イベントハンドラーのデフォルト動作の防止、ユーザーエクスペリエンスの強化などの利点、およびアクセシビリティの懸念などの潜在的な問題について説明します。

制御されたコンポーネントと制御されていないコンポーネントの利点と短所は何ですか？ Mar 19, 2025 pm 04:16 PM

この記事では、予測可能性、パフォーマンス、ユースケースなどの側面に焦点を当てた、Reactの制御されていないコンポーネントと制御されていないコンポーネントの利点と欠点について説明します。それらを選択する際に考慮することを要因についてアドバイスします。

HTMLにおけるReactの役割：ユーザーエクスペリエンスの向上 Apr 09, 2025 am 12:11 AM

ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1）JSXはHTMLを埋め込み、開発をより直感的にします。 2）仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3）保守性を向上させるコンポーネントベースの管理UI。 4）国家管理とイベント処理は、インタラクティブ性を高めます。