画面上で入力されたコードに対する名称をAjaxで取得するサンプルです。
サンプルソース
【クライアント側 - HTML】(index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>AjaxSample</title>
<script>
function getName() {
var url = 'http://xxxxx/ajaxsample.php'; //サーバ側PHPのパスを指定する
var cd = document.getElementById('cd').value;
var req = new XMLHttpRequest();
req.open("POST", url);
req.setRequestHeader("X-Requested-With", "XMLHttpRequest");
req.onreadystatechange = function () {
if (req.readyState == 4) {
document.getElementById('name').value = req.responseText;
}
}
req.send(cd);
}
</script>
</head>
<body>
<input type="text" id="cd" />
<input type="button" value="検索" onclick="getName();" />
<input type="text" id="name" />
</body>
</html>
【サーバ側 - PHP】(ajaxsample.php)
<?php
//パラメータ受け取り
$cd = file_get_contents('php://input');
//判定
$ret = "";
switch($cd){
case '1':
$ret = "AAA";
break;
case 2:
$ret = "BBB";
break;
case 3:
$ret = "CCC";
break;
default:
$ret = "XXX";
break;
}
//結果返却
echo $ret;
exit();
名称をswitch文で軽く判定している箇所を、DBから名称を取得すると実用的です。