PHPで削除ダイアログを作成する方法

Web アプリケーションを開発する場合、多くの場合、要素の削除などの操作が必要になります。この操作は、削除ボタンさえあれば簡単に実現できます。ただし、削除ボタンが多数あり、ユーザーに確認を求めたい場合には、削除ダイアログ ボックスが非常に便利です。

この記事では、PHPで削除ダイアログボックスを作成する方法を紹介します。

ステップ 1: 削除ボタンを作成する

まず、削除ダイアログ ボックスをトリガーする削除ボタンを作成しましょう。次のように HTML コードを使用してボタンを作成します。

<button onclick="showDeleteDialog()">删除</button>

このボタンの onclick イベントは、JavaScript 関数 showDeleteDialog() を呼び出します。この関数は後で JavaScript で実装します。

ステップ 2: 削除ダイアログ ボックスを実装する

次に示すように、JavaScript と HTML コードを使用して削除ダイアログ ボックスを作成します。

<div id="deleteDialog" style="display:none">
  <p>你确定要删除吗？</p>
  <button onclick="deleteElement()">确定</button>
  <button onclick="hideDeleteDialog()">取消</button>
</div>

この削除ダイアログ ボックスは次のもので構成されます。段落と 2 つのボタンで構成されます。 1 つのボタンは削除を確認するために使用され、もう 1 つのボタンは削除をキャンセルするために使用されます。ダイアログボックスのIDは「deleteDialog」で、初期状態は非表示になっています。

ステップ 3: JavaScript 関数の実装

次に、ユーザーが削除ボタンをクリックしたときに削除ダイアログ ボックスを表示する JavaScript 関数を実装する必要があります。 showDeleteDialog() 関数を JavaScript コードで次のように記述します。

function showDeleteDialog(){
  document.getElementById("deleteDialog").style.display = "block";
}

この関数は、getElementById() メソッドを通じて「deleteDialog」要素を取得し、その表示属性を「block」に設定して、ダイアログ ボックスが表示されるようにします。表示されます。

ステップ 4: deleteElement() 関数を実装する

ユーザーが削除を確認した後、実際の削除操作を実行する必要があります。以下に示すように、JavaScript と PHP コードを通じて deleteElement() 関数を実装します。

function deleteElement(){
  // 获取要删除的元素ID
  var elementID = "elementID";

  // 发送HTTP请求
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "delete.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
      // 删除成功，隐藏对话框
      hideDeleteDialog();
    }
  };
  xhr.send("id=" + elementID);
}

この関数は、HTTP POST メソッドを通じて、削除される要素の ID をサーバー上の PHP スクリプトに送信します。 PHP スクリプトが要素を正常に削除すると、この関数は HideDeleteDialog() 関数を呼び出して、削除ダイアログ ボックスを非表示にします。

ステップ 5: HideDeleteDialog() 関数を実装する

最後に、削除ダイアログ ボックスを非表示にする関数を実装する必要があります。次のように、JavaScript コードで hideDeleteDialog() 関数を作成します。

function hideDeleteDialog(){
  document.getElementById("deleteDialog").style.display = "none";
}

この関数は、getElementById() メソッドを通じて「deleteDialog」要素を取得し、ダイアログ ボックスが表示されるようにその表示属性を「none」に設定します。隠れた。 。

これまでに、PHP で削除ダイアログ ボックスを作成するすべての手順が完了しました。 HTML コードを使用して、削除ダイアログ ボックスをトリガーする削除ボタンを作成します。 JavaScript コードを使用して showDeleteDialog() 関数を実装し、削除ダイアログ ボックスを表示します。ユーザーがクリックして削除を確認した後、deleteElement() 関数を通じて実際の削除操作を実行し、hideDeleteDialog() 関数を呼び出して削除ダイアログ ボックスを非表示にします。

以上がPHPで削除ダイアログを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。