jQuery非同期通信でPHPから値を受け取る – 初歩の初歩の初歩
昔CGI(Perl)で掲示板なんか作って勉強していたときに、初歩的な掲示板が作れたら、後はそれに肉付けすれば何でも作れるはずだと理解しました。非同期通信に関しても、ユーザーアクションなどをトリガーにPHPと通信を行い、コールバックを受け取るという極々シンプルな事を理解すれば、後は肉付けをしていけばいいのだと思います。
サンプル 1
https://studio-key.com/Sample/jquery/10/01.html
送信された値に現在日時をくっつけたものを受け取ります。
javascript
jQuery(document).ready(function(){
//ボタンを押したら処理開始
$(document).on('click','#button',function(){
var data = $("#form").serialize(); //
<form id="form"></form>$.ajax({
type: "POST",
url: "01.php",
data: data,
}).done(function(xml){
var str = $(xml).find("str").text();
$("#sample1").text(str);
}).fail(function(data){
$("#sample1").text('Error');
});
});
});
PHP
<?php
if(!isset($_POST)) exit; //POST無ければ停止 実際はサニタイズなどしっかりと。
$return = $_POST['str'].' - '.date('Y/m/d H:i'); //送信された値と日付を合体
header("Content-type: application/xml");
echo '<?xml version="1.0" encoding="UTF-8" ?> ' . "\n";
echo '<xml>'."\n";
echo ' <str>'.$return.'</str>'."\n";
echo '</xml>'."\n";
非同期通信にも色々なオプションがあったりしますが、先ずはこういうものなのだと覚えた方が楽です。難しい事は後から覚えられますし。
フォームの値をPHPに渡す
var data = $("#form").serialize();
特殊な処理をしないのであれば、このようにシリアライズしてしまうことで$_POST[‘str’]といった、PHPでPOSTしたときと同じように受け取れます。
サンプル2
https://studio-key.com/Sample/jquery/10/02.html
じゃあメールフォームはどうするの？って事で、サンプル１でフォームに入力した値をPHPに渡す事が出来ているので、PHP側でsendmail処理すればいいだけです。
javascript
jQuery(document).ready(function(){
//ボタンを押したら処理開始
$(document).on('click','#button',function(){
if($("#name").val() == ''){ //名前が空ならエラーを
$("#form").append('名前が空ですよ！');
}else{
var data = $("#form").serialize(); //
<form id="form"></form>//非同期通信開始
$.ajax({
type: "POST",
url: "02.php",
data: data,
}).done(function(xml){
var error = $(xml).find("error").text();
if(!error){
$("#contents").html('送信完了しました');
}else{
$("#contents").html('エラーが発生したようです');
}
}).fail(function(xml){
$("#contents").html('エラーが発生したようです');
});
}
});
});
PHP
<?php
mb_internal_encoding("UTF-8");
if(!isset($_POST)) exit; //POST無ければ停止 実際はサニタイズなどしっかりと。
$flag = null;
/*
* メール送信処理......
*/
//何らかのエラーが発生したらフラグを立てる
if($error){
$flag = true;
}
header("Content-type: application/xml");
echo '<?xml version="1.0" encoding="UTF-8" ?> ' . "\n";
echo '<xml>'."\n";
echo ' <flag>'.$flag.'</flag>'."\n";
echo '</xml>'."\n";
送信がちゃんと成されたかどうかを戻してやり、それに応じて次の処理を行うだけです。サンプルは <div id=”contents”> の中のHTMLを送信完了メッセージで書き変えて終了です。
つまり
PHPだjQueryだなんて難しい事は置いておき
1) ボタンを押したらPHPに変数を渡し
2) それを処理したものを受け取り
3) それに応じて処理する
という事を理解していれば、後はその応用になってきます。
例えば、送信された値をデータベースに記録し、問題が無ければ登録した旨のメールを返信し、問題無かったよ！という印を戻してやればいいって事です。
もちろん、サニタイズやPHPに直撃食らうような攻撃に対する処理とか、色々な処理を行うのは当然です。それらはこれに肉付けしていけばいいだけなので、先ずはこの基本的な事を理解してしまえば、あとはスムーズに書けるんじゃないかと思います。
