ホームページ >ウェブフロントエンド >フロントエンドQ&A >ajaxデータ削除javascript
ajaxデータ削除javascript
- WBOYオリジナル
- 2023-05-09 09:16:37769ブラウズ
インターネットの急速な発展と 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 サイトの他の関連記事を参照してください。