ホームページ > バックエンド開発 > PHPの問題 > PHPでクリックして削除するポップアップウィンドウを実装する方法

PHPでクリックして削除するポップアップウィンドウを実装する方法

PHPz
リリース: 2023-04-11 09:47:44
オリジナル
806 人が閲覧しました

人々の Web アプリケーションへの依存が深まるにつれ、ユーザーが Web ページ上でデータ操作を実行できるようにする必要性がますます一般的になってきています。 Web ページで削除操作を実行する場合、重要なデータを誤って削除しないように、削除を確認するポップアップ ウィンドウをユーザーに表示する必要があることがよくあります。この機能をPHP言語で実装する場合、JavaScriptと組み合わせることができますので、PHPとJavaScriptを使ってポップアップ削除確認ポップアップウィンドウを実現する方法を見てみましょう。

まず、PHP で、削除リクエストを処理するコードを記述する必要があります。この例では、データベースから削除するエントリを取得したと想定し、[削除] をクリックすると、処理のために PHP バックエンド プログラムに削除リクエストを送信できます。 PHP コードは次のとおりです。

<?php
// 获取待删除的数据
$id = $_GET[&#39;id&#39;];

// 处理删除请求
if (isset($id)) {
  // 在这里写下删除数据的代码
}
?>
ログイン後にコピー

次に、フロントエンド ページに「削除」アクション ボタンを追加し、そのボタンを削除処理スクリプトにリンクする必要があります。その前に、このボタンにクラスを追加して、JavaScript コードでの操作を容易にすることができます。具体的なコードは次のとおりです。

<a href="delete.php?id=xxx" class="delete-button">删除</a>
ログイン後にコピー

このうち、xxx は削除する必要があるデータの一意の識別子であり、ID 番号またはその他のタグが考えられます。

次に、削除確認のポップアップ ウィンドウを表示する JavaScript コードを記述する必要があります。 「削除」ボタンをクリックすると、次のコードが実行されます:

// 获取所有class为“delete-button”的元素
const deleteButtons = document.querySelectorAll(".delete-button");

// 为每个按钮添加点击事件处理程序
deleteButtons.forEach(button => {
  button.addEventListener("click", event => {
    // 阻止默认的链接跳转行为
    event.preventDefault();

    // 弹出删除确认弹窗
    const result = confirm("确认要删除此项数据吗?");
    if (result) {
      // 如果用户确认删除,则跳转到删除处理脚本页面
      location.href = button.href;
    }
  });
});
ログイン後にコピー

その中で、まず、querySelectorAll 関数を使用して、クラス「delete-button」を持つすべての要素を選択し、deleteButtons 変数に格納します。 。次に、各ボタンにクリック イベント ハンドラーを追加します。これは、ユーザーが [削除] ボタンをクリックしたときに実行されます。このイベント ハンドラーでは、confirm 関数を使用して削除確認ポップアップ ウィンドウをポップアップします。ユーザーが「確認」ボタンをクリックした場合、関数は true を返し、それ以外の場合は false を返します。戻り値が true の場合、location.href 属性を通じてブラウザーの削除処理スクリプト ページにジャンプします。

最後に、フロントエンド ページに上記のコードを追加し、削除ボタンをクリックすると削除確認のポップアップ ウィンドウが表示される機能を実現することに成功しました。

要約すると、PHP と JavaScript を併用すると、削除確認のポップアップ ウィンドウを簡単に表示できます。この操作を実装するときは、まず削除リクエストを処理する PHP コードを記述し、次にフロントエンドで JavaScript を使用して削除確認ポップアップ ウィンドウを表示する必要があります。

以上がPHPでクリックして削除するポップアップウィンドウを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート