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

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

阿新 • • 發佈：2019-01-17

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" 佔位符

相關推薦

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

PHP - AJAX 與 MySQLAJAX 可用來與資料庫進行互動式通訊。AJAX 資料庫例項下面的例項將演示網頁如何通過 AJAX 從資料庫讀取資訊：本教程使用到的 Websites 表 SQL 檔案：websites.sql。例項 選擇一個網站: Google 淘寶 菜

基於ajax+php+mysql資料庫實現使用者註冊登入（轉）

轉至https://blog.csdn.net/hjw453321854/article/details/78810979 1.註冊登入介面： form.html     <html> <meta content="

jq.ajax+php+mysql資料庫實現使用者無重新整理評論

最終效果圖： html+css程式碼 <html> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> <style> *{margin:0;pad

實現兩個MySQL資料庫之間的主從同步_資料庫技術

www.syncnavigator.cn SyncNavigator 資料酷同步工具 做資料同步時所支援的資料庫型別： 支援sqlserver 2000-2014所有版本，全相容，和MYsql 4.x 、MYsql 5.x 、MYsql 6.x版本。 來源資料庫和目標資料庫可以版本不

如何在Ubuntu 14.04上利用jexus搭建支援php+mysql資料庫的網站服務

準備部分：sudo apt-get update          sudo apt-get install unzip -y第一部分：安裝jexus    在終端執行以下命令    cd /tmp    wget https://www.linuxdot.net/down/jexus-5.8.2-x64.

MySQL資料庫優化——通過explain查詢分析SQL的執行計劃

使用explain查詢SQL的執行計劃 SQL的執行計劃側面反映出了SQL的執行效率，具體執行方式如下所示： 在執行的SQL前面加上explain關鍵詞即可；   2、每個欄位的說明： 1）、id列數字越大越先執行，如果說數字一樣大，那麼就從上往下依次執行，id列

在遠端Linux伺服器中備份MySQL資料庫，通過scp將遠端Linux伺服器中檔案下載到本地Linux電腦中

1.首先登入到遠端伺服器（ip 10.46.2.228）,可通過ssh方式登入，確保ssh服務和22埠正常才能使用scp命令下載檔案； 2.執行命令 mysqldump -u root -p mysql(要匯出的資料庫名) > mysql.sql(匯出資料庫儲存檔名

php mysql資料庫備份2

用php程式碼實現資料庫備份可以使網站的管理變得非常便捷，我們可以直接進後臺操作就能完成資料庫的備份。 關鍵技術： 1. 首先要得到該資料庫中有哪些表，所用函式 mysql_list_tables()，然後可以將獲取的所有表名存到一個數組。 2. show c

php mysql資料庫操作類，功能很強大

<?php /* * mysql資料庫 DB類 * @package db * @author yytcpt(無影) * @version 2008-03-27 * @copyrigth http://www.d5s.cn/ */ class db { var $c

樹莓派安裝mysql資料庫並且通過python來進行儲存操作

具體的安裝資料庫的操作詳見：http://blog.csdn.net/huayucong/article/details/49736427 安裝python-Mysqldb 安裝完成後，加上我之前有一片的溫溼度監測的程式碼： （mysql資料庫在樹莓派上； 使用者名稱密碼

MySQL資料庫無法通過 utf8mb4 連線的解決方式

環境：阿里雲 centos 6.5 mysql 5.6 python 問題：通過uri裡面設定 charset=utf8mb4 連線資料庫時，發生問題 Character set ‘utf8mb4’ is not a compiled chara

jdbc連線mysql資料庫報時區錯誤和SSL連線錯誤

錯誤1:時區錯誤 報錯資訊： com.mysql.cj.core.exceptions.InvalidConnectionAttributeException: The server time zone value '?й???????' is unrecognized or represe

新浪雲平臺建立mysql資料庫並使用php7.0版本連線

在新浪雲平臺上建立共享型mysql資料庫   建立資料庫 點選管理 選擇匯入   從navicat中取出已存在的sql檔案 在navicat轉儲sql檔案     注意，儲存時檔案要命名成新

MySql資料庫中sql的IS NOT NULL與!=NULL的區別

在mysql中，篩選非空的時候經常會用到is not null和!=null，這兩種方法單從字面上來看感覺是差不多的，其實如果去執行一下試試的話差別會很大！ 為什麼會出現這種情況呢？ null 表示什麼也不是， 不能=、>、< … 所有的判斷，結果都是false，所有隻能用 is null進行

C++連線mysql資料庫的兩種方法(ADO連線和mysql api連線)

【原文 http://www.jb51.net/article/44262.htm 】 現在正做一個介面，通過不同的連線字串操作不同的資料庫。要用到mysql資料庫，C++連線mysql有2種方法：利用ADO連線、利用mysql自己的api函式進行連線，下面看看如何用吧。

MySQL資料庫總結（13）儲存過程與函式

儲存過程：procedure 簡介 我們常用的操作資料庫語言SQL語句在執行的時候需要先編譯，然後執行 而儲存過程是一組為了完成特定功能的SQL語句集，經編譯後儲存在資料庫中，使用者通過指定儲存過程的名字並給定引數（如果該儲存過

MySQL資料庫總結（5）左連線，右連線，內連線

左連線：left join Select 列1 列2 列N from tableA left join tableB on tableA 列 = tableB

連線MySQL資料庫時常見故障問題的分析與解決

===================================================================================錯誤資訊 ：ERROR 2003 (HY000): Can't connect to MySQL server on 'hostxxxxx' (

Django連線MySQL資料庫的兩種方法（pymysql與mysqlclient）

總結：Django連線MySQL資料庫的兩種方法 1.使用pymysql 首先搭建好Django環境，建立好專案 然後pip安裝pymysql 接著在專案下的init檔案中對pymy

利用C3P0連線池連線mysql資料庫，超過幾小時後連線報wait_timeout錯誤

之前做了一個小專案，用的是C3P0連線池連線mysql資料庫，由於連線數目較小，隔天再連線發現報如下異常錯誤，然後重新重新整理後又正常： 之後檢視資料後發現是因為 ：MySQL 的預設設定下，當一個連線的空閒時間超過8小時後，MySQL 就會斷開該連線，而 c3p0 連線