④POSTで送信したデータをPHPで処理して戻す。
フォームのデータをAjaxを使ってPOSTメソッドを使って送信する場合は、Javascriptで以下のように書きます。
xmlhttp = new XMLHttpRequest(); //Ajax通信のためのオブジェクトの生成
xmlhttp.onreadystatechange = returnDataSHow; //Ajaxでデータが戻ってきた時に実行するメソッド（関数）の登録
xmlhttp.open("POST","sendReturn.php"); //POSTメソッドで「sendReturn.php」のURLエンコードデータを渡す。
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //POSTメソッドで送信するときは必要
xmlhttp.send(sendPara); //URLエンコードデータの送信
ア．送信したデータによって戻ってくるデータを変える
＜ＨＴＭＬのプログラム：sendReturn.html＞
<!doctype html>＜Javascriptのプログラム：sendReturn.js＞
<html>
<head>
<meta charset="utf-8">
<title>フォームデータに従ってサーバ処理を変える。</title>
<script type="text/javascript" src="sendReturn.js"></script>
</head>
<body>
<form>
山田さん<input type="button" value="詳細" id="btn1"><br>
田中さん<input type="button" value="詳細" id="btn2"><br>
鈴木さん<input type="button" value="詳細" id="btn3"><br>
</form>
<div id="returnData">所属部署:</div><br>
</body>
</html>
window.onload=function(){
document.getElementById("btn1").onclick=function(){
sendReturn(1);
}
document.getElementById("btn2").onclick=function(){
sendReturn(2);
}
document.getElementById("btn3").onclick=function(){
sendReturn(3);
}
showObj=document.getElementById("returnData");
defultData= showObj.innerHTML;
}
function returnDataSHow(){
if(xmlhttp.readyState == 4){
showObj.innerHTML=defultData+xmlhttp.responseText;
}
}
function sendReturn(id){
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = returnDataSHow;
xmlhttp.open("POST","sendReturn.php");
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlhttp.send("id=" + id);
}
＜ＰＨＰのプログラム：sendReturn.php＞<?phpイ．フォームのデータをAjaxを使って送信する。
switch ($_POST['id']){
case "1":
$result = "人事部";
break;
case "2":
$result = "経理部";
break;
case "3":
$result = "開発部";
break;
}
echo $result;
?>
<!doctype html>＜javascriptのプログラム：sendReturn2.js＞
<html>
<head>
<meta charset="UTF-8">
<title>フォームデータに従ってサーバ処理を変える。</title>
<script type="text/javascript" src="sendReturn2.js"></script>
</head>
<body>
<form name="frm" id="frm" method="POST" action="sendReturn2.php">
氏名：<input type="text" id="namae"><br>
住所：<input type="text" id="addr"><br>
電話番号：<input type="text" id="tel"><br>
<input type="submit" value="送信" id="sub">
</form>
<div id="returnData">個人情報:</div><br>
</body>
</html>
window.onload=function(){
document.getElementById("frm").onsubmit=function(e){
e.preventDefault();
var namae=document.getElementById("namae").value;
var addr=document.getElementById("addr").value;
var tel=document.getElementById("tel").value;
var sendText="sendName=" + namae + "&sendAddr=" + addr + "&sendTel=" + tel;
sendReturn(sendText);
}
showObj=document.getElementById("returnData");
defultData= showObj.innerHTML;
}
function returnDataSHow(){
if(xmlhttp.readyState == 4){
showObj.innerHTML=defultData+xmlhttp.responseText;
}
}
function sendReturn(sendPara){
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = returnDataSHow;
xmlhttp.open("POST","sendReturn2.php");
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlhttp.send(sendPara);
}
＜PHPのプログラム：sendReturn2.php＞<?php
$result="<br>{$_POST['sendName']}<br>{$_POST['sendAddr']}<br>{$_POST['sendTel']}";
echo $result;
?>