jQuery非同期通信でPHPから値を受け取る – 初歩の初歩の初歩
2014年08月18日
昔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
じゃあメールフォームはどうするの?って事で、サンプル1でフォームに入力した値を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に直撃食らうような攻撃に対する処理とか、色々な処理を行うのは当然です。それらはこれに肉付けしていけばいいだけなので、先ずはこの基本的な事を理解してしまえば、あとはスムーズに書けるんじゃないかと思います。