jQueryを使用してデータを削除し、ページを更新する方法

Web 開発では、データの削除が頻繁に発生します。 jQuery を使用して開発する場合、ライブラリによって提供されるメソッドを使用してこの機能を実現できます。データの削除中にページを時間内に更新できれば、データ削除の効果をより適切に発揮できます。 jQueryを使ってデータを削除したりページを更新する方法を紹介します。

jQuery データの削除

まず、フロントエンド ページに「削除」ボタンを追加する必要があります。このボタンはイベントにバインドする必要があり、ユーザーがボタンをクリックすると、データを削除するアクションがトリガーされます。ここでは、複数のデータ レコードを含むリスト ページがあると仮定します。各レコードの右側に「削除」ボタンがあります。

以下はサンプル コードです:

<table>
  <tr>
    <td>数据1</td>
    <td><button class="delete" data-id="1">删除</button></td>
  </tr>
  <tr>
    <td>数据2</td>
    <td><button class="delete" data-id="2">删除</button></td>
  </tr>
  <tr>
    <td>数据3</td>
    <td><button class="delete" data-id="3">删除</button></td>
  </tr>
</table>

<script>
  $(".delete").on("click", function() {
    var id = $(this).data("id"); // 获取数据id
    $.ajax({
      url: "delete_data.php", // 指定删除数据的后端接口
      type: "POST",
      data: { id: id }, // 提交数据id
      success: function(result) {
        alert("数据已删除。");
      },
      error: function() {
        alert("删除数据失败，请稍后再试。");
      }
    });
  });
</script>

上記のコードでは、jQuery イベント バインディング メカニズムを使用して、「削除」ボタンのクリック イベントをバインドします。ユーザーがボタンをクリックすると、非同期 POST リクエストがトリガーされ、データ ID がバックエンド インターフェイス (delete_data.php) に送信され、どのデータを削除するかをバックエンドに指示します。リクエストが成功すると、単純な警告プロンプト ボックスを使用して、データが削除されたことをユーザーに通知します。

jQuery Refresh Page

上記のコードの非同期リクエストはバックエンド データベースのデータのみを削除し、フロントエンド ページのデータはすぐには削除されません。データを削除し、時間内にページを更新するという目的を達成するには、データが正常に削除された後にページを手動で更新する必要があります。具体的な操作は次のとおりです。

<script>
  $(".delete").on("click", function() {
    var id = $(this).data("id"); // 获取数据id
    $.ajax({
      url: "delete_data.php", // 指定删除数据的后端接口
      type: "POST",
      data: { id: id }, // 提交数据id
      success: function(result) {
        alert("数据已删除。");
        location.reload(); // 刷新页面
      },
      error: function() {
        alert("删除数据失败，请稍后再试。");
      }
    });
  });
</script>

上記のコードでは、データが正常に削除された後に location.reload() メソッドを使用してページを更新します。このメソッドにより、ブラウザは現在のページを再読み込みします。このようにして、ユーザーがリスト ページに戻ると、削除されたデータはリストに表示されなくなります。

概要

この記事では、jQuery を使用してデータを削除し、ページを更新する方法を紹介します。これまでのところ、この一般的な要件を達成するために jQuery を使用する方法をマスターしました。もちろん、実際の開発では、具体的なビジネスロジックによって状況は異なります。ただし、この記事で紹介した基本的な考え方と方法は、実際の開発で同様の問題を解決するために、一定の参考となる可能性があります。

以上がjQueryを使用してデータを削除し、ページを更新する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。