當前位置：首頁 > 运维知识 > 数据库 >内容正文

数据库

html网页如何获取后台数据库的数据(html + ajax + php + mysql)

發布時間：2023/12/1 数据库 46 豆豆

生活随笔收集整理的這篇文章主要介紹了 html网页如何获取后台数据库的数据(html + ajax + php + mysql) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML是無法讀取數據庫的，HTML是頁面前端腳本語言，要想從HTML網頁中獲取SQL數據庫里的數據，需要借助JSP或ASP或PHP或RUBY等語言來實現。簡單的關系可以這樣理解：數據庫<—>JSP或ASP或PHP或RUBY等語言<—>HTML
這里我們選取php作為我們的后端語言。（主要是因為菜鳥教程里面是這樣用的…）
這里可以參考一下：:PHP - AJAX 與 MySQL

html代碼

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <script> function showSite(str) {if (str==""){document.getElementById("txtHint").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("txtHint").innerHTML=xmlhttp.responseText;}}xmlhttp.open("GET","getsite_mysql.php?q="+str,true);xmlhttp.send(); } </script> </head> <body><form> <select name="users" onchange="showSite(this.value)"> <option value="">選擇一個網站:</option> <option value="1">Google</option> <option value="2">淘寶</option> <option value="3">菜鳥教程</option> <option value="4">微博</option> <option value="5">Facebook</option> </select> </form> <br> <div id="txtHint"><b>網站信息顯示在這里……</b></div></body> </html>

其中的 showSite() 函數會執行以下操作：

1、檢查是否有網站被選擇

2、創建XMLHttpRequest對象

3、創建在服務器響應就緒時執行的函數

4、向服務器的文件發送請求（這一步比較難以理解）

5、注意添加到URL末端的參數(q)（包含下拉列表的內容）

php文件代碼

html調用的是getsite_mysql.php文件

該文件中的源代碼會運行針對mysql數據庫的查詢，然后再html表格中返回結果。
代碼如下：

<?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); ?>

解釋如下：

當查詢從js發送到php文件時，會發生：

1、php打開一個到mysql數據庫的連接

2、找到選中的用戶

3、創建HTML表格，填充數據，并發送"txtHint"占位符

還得在vscode上的php配置以及php環境搭建

主要參考這篇文章：

https://www.jb51.net/article/193704.htm

PHPstudy官網如下：

https://www.xp.cn/download.html

基于PhpStudy完成web配置

首頁->一鍵啟動選項修改一下

這里對于“網站”這一欄進行修改，給個域名，指定一下php文件的根目錄

登錄數據庫

在PHPStudy里面啟動mysql和apache，然后打開cmd，切換到mysql的bin文件下

D:\>cd D:\phpstudy_pro\Extensions\MySQL5.7.26\bin

然后輸入：

mysql -hlocalhost -uroot -p

默認帳號和密碼為root。

Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 2 Server version: 5.7.26 MySQL Community Server (GPL)Copyright (c) 2000, 2019, Oracle and/or its affiliates. All rights reserved.Oracle is a registered trademark of Oracle Corporation and/or its affiliates. Other names may be trademarks of their respective owners.Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.mysql>

mysql的table準備

建表語句：

CREATE TABLE Websites (id INT,name VARCHAR(255),url VARCHAR(255),alexa INT,country VARCHAR(255) ) character set = utf8;

插入數據：

insert into Websites values(1,'Google','https://www.google.cm/',1,'USA'); insert into Websites values(2,'淘寶','https://www.taobao.com/',13,'CN'); insert into Websites values(3,'菜鳥教程','http://www.runoob.com/',4689,'CN'); insert into Websites values(4,'微博','http://weibo.com/',20,'CN'); insert into Websites values(5,'Facebook','https://www.facebook.com/',3,'USA'); 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 | +----+--------------+---------------------------+-------+---------+

將html文件和php文件項目放入WWW文件夾下

必須要在D:\phpstudy_pro\WWW下放入php執行文件，否則文件不會執行的。

這里新建一個文件夾D:\phpstudy_pro\WWW\NewProject，里面的文件如下：

這里對上面的html代碼和php代碼進行微調：
html修改部分如下：

// 注意此時這個寫法是有問題的 xmlhttp.open("GET","index.php?q="+str,true);

php修改部分如下：

$con = mysqli_connect('www.test.com','root','root');

跨域問題以及解決方案

按照我的理解此時應該是沒有問題的，點擊html網站的復選框，就應該渲染出結果來。
但是此時是有問題的，經過排查發現是下面代碼中的

xmlhttp.status的值為0.
參考下面兩個文章，解決了這個問題：
AJAX問題之XMLHttpRequest status = 0
xmlhttp.status為0的原因及其解決方案
有兩處需要修改：
html：

xmlhttp.open("GET","http://www.test.com/index.php?q="+str,true);

與之前區別在于加上了http://www.test.com/
php:

<?php header("Access-Control-Allow-Origin:*");

在頭部加上了一個header。
下面是原因分析：
1、為什么state為0：xmlhttp自己在模擬，因為根本就沒通過服務器。本地直接打開而已。OPENED了，所以status為0。
基于此，我修改了html中代碼，使其通過http訪問，但是只是如此的話還是不能獲取數據，這涉及到了另外一個問題了：跨域
先簡單介紹下跨域基本概念：
首先一個url是由：協議、域名、端口三部分組成。（一般端口默認80）
如：https://blog.moonlet.cn:80
當一個請求url的協議、域名、端口三者之間的任意一個與當前頁面url不同即為跨域。
跨域產生的原因：

出于瀏覽器的同源策略限制。

同源策略（Same Orgin Policy）是一種約定，它是瀏覽器核心也最基本的安全功能，它會阻止一個域的js腳本和另外一個域的內容進行交互，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。。所謂同源（即在同一個域）就是兩個頁面具有相同的協議（protocol）、主機（host）和端口號（port）。

所以我們的html雖然去訪問了http://www.test.com/index.php，但是瀏覽器跨域的返回頭沒有允許，所以瀏覽器阻止，添加Access-Control-Allow-Origin這個屬性可以解決這個問題。

總結

以上是生活随笔為你收集整理的html网页如何获取后台数据库的数据(html + ajax + php + mysql)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。