UI設計したり、ウェブシステムを開発したりします。 

SQL見るだけクエリ#140 Ajaxを使用してPHPスクリプトを呼び出しサーバーサイドでバリデーション

記入日:2023-05-28 編集日:2023-05-28

Ajaxを使用してPHPスクリプトを呼び出しサーバーサイドでバリデーションを解説してみようと思います。

この記事を読むと(約5分)
Ajaxを使用してPHPスクリプトを呼び出しサーバーサイドでバリデーションする方法をイメージできます。

Ajaxを使ってサーバーサイドでバリデーション

以下にサーバーサイドの処理を実行する例を示します。

フォームのデータの送信と処理:

HTML:

<form id="myForm">
  <input type="text" name="name">
  <input type="email" name="email">
  <input type="submit" value="Submit">
</form>
<div id="result"></div>

JavaScript (Ajaxの部分):

// フォームの送信時の処理
document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault(); // デフォルトのフォーム送信をキャンセル

  var form = event.target;
  var formData = new FormData(form);

  // Ajaxリクエストの送信
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "process.php", true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      document.getElementById("result").textContent = xhr.responseText;
    }
  };
  xhr.send(formData);
});

PHP (process.php):

$name = $_POST["name"];
$email = $_POST["email"];

// データのバリデーションや処理を行う
// ...

// 応答を返す
echo "処理が完了しました。";

上記の例では、フォームが送信されるとAjaxリクエストが発生し、フォームデータがPHPのスクリプト(process.php)に送信されます。PHPスクリプトでは、送信されたデータのバリデーションや処理を行い、応答として「処理が完了しました。」というメッセージを返します。その応答はJavaScriptによって取得され、結果がHTMLの `<div id="result">` 要素に表示されます。

この例は簡単なフォームのデータ処理ですが、PHPスクリプト内でデータベースへの接続や操作、外部APIへのアクセス、セキュリティチェックなどの処理を実行することも可能です。

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。