javascriptからphpへフォームデータを受け渡す方法

javascript

Javascript、php間のデータの受け渡し方法は、必要そうだけど、案外知らない方は多いのではないでしょか?しかし、このやり方を知っていればできることが増えるのは間違いないですよね?
ご存知の通りJavascriptとphpは全く異なる言語です。Javascriptはアラートを出す、スライドショーを動かすなどwebサイト上で動的な動作に使われます、一方phpは第三者の目に触れることのないバックグランドで処理を実行することができます。この2つの異なる言語間でのデータの受け渡し方法を、今回は特に「フォームデータ」の受け渡し方法をピックアップして解説していきたいと思います。

ちなみに今回の解説に使うモデルは、私が実際に受けたことのある案件から抽出してきたものですので、より実践的な方法を習得できる仕組みになっております。

Javascript、php間のデータ受け渡しモデル

今回使用するモデルは、「ページ遷移なしで動作するメールフォーム」です。
まず、主な動作を簡単に説明しておきます

Javascriptがフォームのデータを受け取り、phpに渡す、phpから帰ってきたエラーあり、送信完了などの答えをアラートで示す。一方のphpは、Javascriptから受け取ったデータを判定して、Javascriptに返す、データに不備がなければ、メールを送信する。
これが、サンプルの一連の動作になります。

それではまずサンプルモデルのコードをご確認ください。

html

php

ご覧のように、フォームはお名前、お問い合わせ内容、メールアドレスのみのシンプルな構成にしております。また、見ての通り、今回のテーマにあまり関係ない部分は一部省略しております、ご了承ください。それでは解説いたします。

解説

今回はJavascriptのライブラリ「jQuery」を使用しています、そして、phpへのデータの受け渡しには、Ajaxを使用いたしました。モデルの「html」21行目からがAjaxの使用例になります。
Ajax内の設置ですが、まずは、POST送信を行いたいので、[type:]に[post]を指定します。
次に、データーの送り先であるphpのアドレスを[url:]に指定します。サンプルでは[send.php]となっていますが、もちろんファイル名は何でも大丈夫です。
次に、送信する内容ですが、[data:]に指定します。サンプルでは、事前に変数[data]に格納したデータを指定しておりますが[data:]以降に直接配置する方法でももちろん大丈夫です。
POST送信が成功した場合は、[success:]内の処理が実行されます、送信に失敗した場合の処理は[error:]内に設定しておきます。

次に、「php」についてですが、この部分は主題とは離れるので細かな説明は省いて説明いたします。
まず、上から順位、post値の受け取り[3行目~]→受け取った値をチェック[7行目~]→エラーがあればエラー内容を送信[22行目~]→エラーがなければフォームを送信して、送信が完了したことを通知[29行目~]という流れになります。
メール送信内容などは省略しております。「php」の”echo”ではきだされた結果は再びJavascriptに送られ[success:]内で処理が実行されます。

以上のよに、Javascriptからデータを送ったり、phpからのデータを受け取ったりといことがこの方法を使うことで可能になります。今回のモデルはフォーム送信でしたが、他にも応用の利く分野ですので是非お役立てください。