1. 程式人生 > >前端 後臺php MySQL資料庫之間通過Ajax技術的完整連線與互動 Ajax的應用

前端 後臺php MySQL資料庫之間通過Ajax技術的完整連線與互動 Ajax的應用

PHP - AJAX 與 MySQL

AJAX 可用來與資料庫進行互動式通訊。

AJAX 資料庫例項

下面的例項將演示網頁如何通過 AJAX 從資料庫讀取資訊:

本教程使用到的 Websites 表 SQL 檔案:websites.sql

例項

 選擇一個網站: Google 淘寶 菜鳥教程 微博 Facebook 
選擇對應選項,使用者資訊會顯示在這……

例項解釋 - MySQL 資料庫

在上面的例項中,我們使用的資料庫表如下所示:

mysql>select*from websites;+----+--------------+---------------------------+-------+---------+
| id | name | url | alexa | country |+----+--------------+---------------------------+-------+---------+|1|Google| https://www.google.cm/ | 1 | USA ||2|淘寶| https://www.taobao.com/ | 13 | CN ||3|菜鳥教程| http://www.runoob.com/ | 4689 | CN ||4|微博| http://weibo.com/ | 20 | CN |
|5|Facebook| https://www.facebook.com/ | 3 | USA |+----+--------------+---------------------------+-------+---------+5 rows inset(0.01 sec)

例項解釋 - HTML 頁面

當用戶在上面的下拉列表中選擇某位使用者時,會執行名為 "showSite()" 的函式。該函式由 "onchange" 事件觸發:

test.html 檔案程式碼:

<!DOCTYPEhtml><html><head><metacharset="utf-8
"><title>菜鳥教程(runoob.com)</title><script>functionshowSite(str){ if(str==""){ document.getElementById("txtHint").innerHTML=""; return; } if(window.XMLHttpRequest){// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼 xmlhttp=newXMLHttpRequest(); } else{ // IE6, IE5 瀏覽器執行程式碼 xmlhttp=newActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("txtHint").innerHTML=xmlhttp.responseText; }} xmlhttp.open("GET","getsite_mysql.php?q="+str,true); xmlhttp.send();}</script></head><body><form> <selectname="users"onchange="showSite(this.value)"> <optionvalue="">選擇一個網站:</option> <optionvalue="1">Google</option> <optionvalue="2">淘寶</option> <optionvalue="3">菜鳥教程</option> <optionvalue="4">微博</option> <optionvalue="5">Facebook</option> </select></form><br><divid="txtHint"><b>網站資訊顯示在這裡……</b></div></body></html>

showSite() 函式會執行以下步驟:

  • 檢查是否有網站被選擇
  • 建立 XMLHttpRequest 物件
  • 建立在伺服器響應就緒時執行的函式
  • 向伺服器上的檔案傳送請求
  • 請注意新增到 URL 末端的引數(q)(包含下拉列表的內容)

PHP 檔案

上面這段通過 JavaScript 呼叫的伺服器頁面是名為 "getsite_mysql.php" 的 PHP 檔案。

"getsite_mysql.php" 中的原始碼會執行一次針對 MySQL 資料庫的查詢,然後在 HTML 表格中返回結果:

getsite_mysql.php 檔案程式碼:

<?php $q = isset($_GET["q"]) ? intval($_GET["q"]) : ''; if(empty($q)){echo'請選擇一個網站'; exit;}$con = mysqli_connect('localhost','root','123456'); if(!$con){ die('Could not connect: ' . mysqli_error($con)); } // 選擇資料庫 mysqli_select_db($con,"test"); // 設定編碼,防止中文亂碼 mysqli_set_charset($con, "utf8"); $sql="SELECT * FROM Websites WHERE id = '".$q."'"; $result = mysqli_query($con,$sql); echo"<table border='1'> <tr> <th>ID</th> <th>網站名</th> <th>網站 URL</th> <th>Alexa 排名</th> <th>國家</th> </tr>";while($row = mysqli_fetch_array($result)){ echo"<tr>"; echo"<td>" . $row['id'] . "</td>";echo"<td>" . $row['name'] . "</td>";echo"<td>" . $row['url'] . "</td>";echo"<td>" . $row['alexa'] . "</td>";echo"<td>" . $row['country'] . "</td>";echo"</tr>"; } echo"</table>"; mysqli_close($con);?>

解釋:當查詢從 JavaScript 傳送到 PHP 檔案時,將發生:

  1. PHP 開啟一個到 MySQL 資料庫的連線
  2. 找到選中的使用者
  3. 建立 HTML 表格,填充資料,併發送回 "txtHint" 佔位符

相關推薦

no