「Ajax」openメソッドにgetを指定してデータベースからデータを取得する

2022年8月14日

環境
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

Ajax

Posted by arkgame

関連投稿: