PHP フォーム送信: AJAX 非同期送信とデータ処理-PHPチュートリアル-php.cn

PHP フォーム送信: AJAX 非同期送信とデータ処理

王林

リリース： 2023-08-07 17:32:02

オリジナル

1050 人が閲覧しました

PHP フォーム送信: AJAX 非同期送信とデータ処理

Web アプリケーションの開発に伴い、フォーム送信は Web サイト開発における重要なリンクの 1 つになりました。従来のフォーム送信方法では、ページを更新することでデータの送信と処理を完了します。ただし、この方法ではページが更新されるため、ユーザーに不快感を与えます。ユーザーエクスペリエンスと Web サイトのパフォーマンスを向上させるために、AJAX テクノロジーを使用して非同期フォームの送信とデータ処理を行うことができます。

この記事では、PHP と AJAX テクノロジを使用してフォームの非同期送信とデータ処理を実装する方法を紹介し、対応するコード例を示します。

AJAX によるフォームデータの非同期送信

まず、HTML フォームを作成し、非同期送信用のボタンを追加する必要があります。コード例は次のとおりです。

<form id="myForm">
  <input type="text" name="name" placeholder="姓名" required>
  <input type="email" name="email" placeholder="邮箱" required>
  <input type="number" name="age" placeholder="年龄" required>
  <button type="button" id="submitBtn">提交</button>
</form>

ログイン後にコピー

上の例では、ID「myForm」のフォームを使用し、ID「submitBtn」の属性を送信ボタンに追加します。

次に、JavaScript を使用してボタンのクリックイベントをリッスンし、フォームデータをサーバーに送信する必要があります。コード例は次のとおりです。

document.getElementById("submitBtn").addEventListener("click", function() {
  var form = document.getElementById("myForm");
  var formData = new FormData(form);
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "process.php", true);
  xhr.send(formData);
});

ログイン後にコピー

上の例では、addEventListener メソッドを使用してボタンクリックイベントをリッスンします。ボタンがクリックされると、FormData オブジェクトを使用してフォームデータを収集し、XMLHttpRequest オブジェクトを作成してデータをサーバーに送信します。

PHP データ処理

サーバーは受信したフォームデータを処理し、対応する結果を返します。フォームデータを新しい PHP ファイルで処理できます。コード例は次のとおりです。

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$age = $_POST['age'];

// 对表单数据进行进一步处理，比如存储到数据库

// 返回处理结果
$response = array("success" => true, "message" => "表单数据提交成功！");
echo json_encode($response);
?>

ログイン後にコピー

上の例では、$_POST グローバル変数を通じてフォームデータを取得します。次に、データの有効性の検証、データベースへのデータの保存など、フォームデータに対してさらに処理を実行できます。

最後に、echo ステートメントを使用して、フロントエンドページの対応する処理の処理結果を含む JSON 文字列を返します。

フロントエンドデータ処理

フロントエンドページでは、処理結果を表示する要素を追加できます。コード例は次のとおりです。

<div id="result"></div>

ログイン後にコピー

JavaScript コードでは、XMLHttpRequest オブジェクトのreadystatechange イベントをリッスンすることでサーバーから返されたデータを取得し、結果をページに表示できます。コード例は次のとおりです:

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var result = JSON.parse(xhr.responseText);
    var message = result.message;
    document.getElementById("result").innerHTML = message;
  }
};

ログイン後にコピー

上記の例では、readyState 属性と status 属性を使用して、リクエストが完了したかどうかを判断します。リクエストが完了し、応答が成功した場合は、JSON を使用します。 parse メソッドを使用してサーバーから返された JSON 文字列を解析し、結果をページに表示します。

これまでに、AJAX を使用してフォームデータを非同期に送信し、サーバー側で処理するプロセス全体が完了しました。このようにして、ユーザーはページが更新されるのを待つ必要がなく、リアルタイムでデータ処理結果を取得できるため、Web サイトのユーザーエクスペリエンスとパフォーマンスが向上します。

結論

この記事では、PHP と AJAX テクノロジを使用してフォームの非同期送信とデータ処理を実装する方法を紹介し、対応するコード例を示します。あなたのウェブサイト開発に役立つことを願っています!

以上がPHP フォーム送信: AJAX 非同期送信とデータ処理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。