Javascript、php間のデータの受け渡し方法は、必要そうだけど、案外知らない方は多いのではないでしょか？しかし、このやり方を知っていればできることが増えるのは間違いないですよね？
ご存知の通りJavascriptとphpは全く異なる言語です。Javascriptはアラートを出す、スライドショーを動かすなどwebサイト上で動的な動作に使われます、一方phpは第三者の目に触れることのないバックグランドで処理を実行することができます。この2つの異なる言語間でのデータの受け渡し方法を、今回は特に「フォームデータ」の受け渡し方法をピックアップして解説していきたいと思います。
ちなみに今回の解説に使うモデルは、私が実際に受けたことのある案件から抽出してきたものですので、より実践的な方法を習得できる仕組みになっております。
Javascript、php間のデータ受け渡しモデル
今回使用するモデルは、「ページ遷移なしで動作するメールフォーム」です。
まず、主な動作を簡単に説明しておきます
。
Javascriptがフォームのデータを受け取り、phpに渡す、phpから帰ってきたエラーあり、送信完了などの答えをアラートで示す。一方のphpは、Javascriptから受け取ったデータを判定して、Javascriptに返す、データに不備がなければ、メールを送信する。
これが、サンプルの一連の動作になります。
それではまずサンプルモデルのコードをご確認ください。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$('#send').click(function()
{
//postメソッドで送るデータを定義 var data = {パラメータ名 : 値};
var data = {
namae : $('#namae').val(),
email : $('#email').val(),
ask : $('#ask').val()
};
$.ajax({
type: "post",
url: "send.php",
data: data,
//Ajax通信が成功した場合
success: function(data, dataType)
{
//PHPから返ってきたデータの表示
alert(data);
//送信完了後フォームの内容をリセット
if(data == "送信が完了しました"){
document.forms[0].elements[0].value="";
document.forms[0].elements[1].value="";
document.forms[0].elements[2].value="";
}
},
//Ajax通信が失敗した場合のメッセージ
error: function()
{
alert('メールの送信が失敗しました。');
}
});
return false;
});
});
</script>
</head>
<body>
<form id="contactForm" name="contactForm" method="post" >
<ul>
<li><input type="text" id="namae" name="namae" placeholder="名前"></li>
<li><input type="email" id="email" name="email" placeholder="E-mail" ></li>
<li><textarea name="ask" id="ask" placeholder="お問い合わせ内容" ></textarea></li>
</ul>
<p class="more"><input id="send" type="submit" value="送る"></p>
</form>
</body>
</html>
php
<?php
header("Content-type: text/plain; charset=UTF-8");
$sender_name = $_POST['namae'];
$sender_mail_address = $_POST['email'];
$contact_body = $_POST['ask'];
//空白チェック
$errorflag = 0;
if ($sender_name == null) {
$error_name = "お名前が未入力です";
$errorflag = 1;
}else{$error_name = "";}
if ($sender_mail_address == null) {
$error_mail = "メールアドレスが未入力です";
$errorflag = 1;
}else{$error_mail = "";}
if ($contact_body == null) {
$error_ask = "お問い合わせ内容が未入力です";
$errorflag = 1;
}else{$error_ask = "";}
if ($errorflag == 1)
{
if($error_name != ""){ echo $error_name."\n";}
if($error_mail != ""){ echo $error_mail."\n";}
if($error_ask != ""){ echo $error_ask."\n";}
}
else
{
//ここにメール送信の設定
echo "送信が完了しました";
}
?>
ご覧のように、フォームはお名前、お問い合わせ内容、メールアドレスのみのシンプルな構成にしております。また、見ての通り、今回のテーマにあまり関係ない部分は一部省略しております、ご了承ください。それでは解説いたします。
解説
今回は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からのデータを受け取ったりといことがこの方法を使うことで可能になります。今回のモデルはフォーム送信でしたが、他にも応用の利く分野ですので是非お役立てください。