ロゴ
menu
HOME > ｊQuery・Javascript > jQuery非同期通信でPHPから値を受け取る – 初歩の初歩の初歩

jQuery非同期通信でPHPから値を受け取る – 初歩の初歩の初歩

昔CGI(Perl)で掲示板なんか作って勉強していたときに、初歩的な掲示板が作れたら、後はそれに肉付けすれば何でも作れるはずだと理解しました。非同期通信に関しても、ユーザーアクションなどをトリガーにPHPと通信を行い、コールバックを受け取るという極々シンプルな事を理解すれば、後は肉付けをしていけばいいのだと思います。

サンプル 1

https://studio-key.com/Sample/jquery/10/01.html

送信された値に現在日時をくっつけたものを受け取ります。

javascript

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
<?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に渡す

SyntaxHighlighterについて
1
var data = $("#form").serialize();

特殊な処理をしないのであれば、このようにシリアライズしてしまうことで$_POST[‘str’]といった、PHPでPOSTしたときと同じように受け取れます。

サンプル2

https://studio-key.com/Sample/jquery/10/02.html

じゃあメールフォームはどうするの？って事で、サンプル１でフォームに入力した値をPHPに渡す事が出来ているので、PHP側でsendmail処理すればいいだけです。

javascript

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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に直撃食らうような攻撃に対する処理とか、色々な処理を行うのは当然です。それらはこれに肉付けしていけばいいだけなので、先ずはこの基本的な事を理解してしまえば、あとはスムーズに書けるんじゃないかと思います。