php 與 ajax 獲取123的案例

木子小僧發表於2016-01-13
PHP

同事問我，我們們從資料庫裡面獲取資料，用ajax的方式展示到前臺頁面。啥都不說了，動手寫個案例吧。

1，建立一個頁面：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
　　<script type="text/javascript" src="ajax.js"></script>
　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
　　<title>Ajax demo</title>
</head>
<body>
　　<input type="button" id="txt1" onclick="showHint()" value="獲取123"/>
　　<p>數字：<span id="txtHint"></span></p> 
</body>
</html>

2.寫一個js，就是ajax

 1 var xmlhttp;
 2 function showHint()
 3 {
 4     // 定義新的陣列
 5     var array = new Array();
 6     // 建立XMLHttpRequest物件
 7     if (window.XMLHttpRequest)
 8     {// code for IE7+, Firefox, Chrome, Opera, Safari 現代瀏覽器
 9         xmlhttp=new XMLHttpRequest();
10     }
11     else
12     {// code for IE6, IE5 使用者低版本ie
13         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
14     }
15     
16     // 設定請求型別,請求地址，以及是否啟用非同步處理請求，大多數設定開啟 true
17     xmlhttp.open("GET","gethint.php",true);
18     // 將請求傳送至伺服器
19     xmlhttp.send();
20     // 處理onreadystatechange事件 我們規定當伺服器響應已做好被處理的準備時所執行的任務
21     xmlhttp.onreadystatechange=function()
22     {
23         if (xmlhttp.readyState==4 && xmlhttp.status==200)
24         {
25             document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
26         }
27     }
28 }

3，好吧，寫一個php吧，當成伺服器。資料是假的。

 1 <?php
 2 // 用名字來填充陣列
 3 $a[]="1";
 4 $a[]="2";
 5 $a[]="3";
 6 
 7 $hint="";
 8 for($i=0; $i<count($a); $i++)
 9 {    
10     $hint=$hint."  ".$a[$i];
11 }
12 $response=$hint;
13 //輸出響應
14 echo $response;
15 ?>

看一下介面：

點選按鈕：

1,2,3，不多不少，出來了。

相關文章