「Ajax」openメソッドにgetを指定してデータベースからデータを取得する
環境
Google Chrome 103.0.5060.134
構文
1.xmlhttp.open(“GET","/xxx/getInfo.php?name="+str,true);
「?name=」に続けて送信したいデータ（str変数名）をURLに含めて一緒に送信します。 Getで送信処理を行う場合は、URLにURLに「?」を付けて任意のデータを送信します。
2.XMLHttpRequest.responseText
XMLHttpRequest の responseText プロパティは読み取り専用で、送信されたリクエストに続いてサーバーから受け取ったテキストを返します。
3.xmlhttp.readyState==4
データを取得して通信が終了している状態
4.xmlhttp.status==200
特に問題なく通信が成功した状態
5.document.getElementById(“セレクタID名").innerHTML=xmlhttp.responseText;
データベースからデータを取得して要素「セレクタID」にセットします。
使用例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function getInfo(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("resHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari ブラウザ適用
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 ブラウザ適用
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("resHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ark/ajax/getInfo.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="">
<select name="customers" onchange="getInfo(this.value)" >
<option value="APPLE">Apple Computer, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
</select>
</form>
<br>
<div id="resHint">ここに取得結果情報が表示されます...</div>
</body>
</html>
結果
セレクトボックス項目に「Apple Computer,Inc」を選択すると、データベースに送信してajax処理を実行します。画面に以下のメッセージ(データベースのデータ)が表示されます。
CustomerID APPLE CompanyName Apple Computer, Inc. ContactName Steven Jobs Address 1 Infinite Loop Cupertino, CA 95014 City Cupertino PostalCode 95014 Country USA