寫得很詳細了，如果有問題留言再問哈！！！
一開始初學網頁製作的時候，空餘時間比較少，拿來代碼就用，只要能實現功能就好
我那時候以爲 HTML 和 PHP 之間的數據交互只能新開一個 PHP 網頁，也就是簡單在HTML頁面用一下表單 （from） ，然後在 PHP 頁面用一下變量接受，然後後面就寫跟 MySQL 交互的代碼。
<form action="login.php" method="POST">
<input type="text" name="name" placeholder="請輸入用戶名"/>
<input type="password" name="password" placeholder="請輸入密碼"/>
<input name="login" type="button" value="登錄" onclick=submit() />
</form>
$name = $_POST["name"];
$pwd = $_POST["password"];
action 指定的是接收表單數據的 PHP 文件，method有兩種模式 post 和 get，這裏就不贅述了，學習網址：https://www.runoob.com/php/php-get.html
PHP的變量形式就是 $+名字，method = post 的表單（from）的數據只用 $_POST 來接受，get的話就用 $_GET 來接受
-----------------------------==---------------------------------------------------------------------------------------------------------
下面進入正文
如果是需要頻繁的和數據庫交互顯示的話，上面的這種方法不斷跳轉頁面會很煩人，於是我在菜鳥教程那裏想找有沒有不需要跳轉頁面顯示的方法，當我看到了這個 【AJAX數據庫實例】的時候，我笑了，嘻嘻嘻，這就是我要找的。
在菜鳥教程裏面的例程是通過下拉菜單選擇來進行與數據庫的交互，而我要實現的是輸入框的內容和數據庫的交互，於是我需要按找我的思路對代碼進行了整改，交互的核心都離不開這個函數
<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>
那些 xmlhttp 什麼的我一臉懵逼，看半天沒搞懂，於是我決定，先用再說，這我覺得是個學習語言的技巧來的，可以借鑑一下，嘻嘻嘻
js（javascript） 寫的函數前面都要加個function，約定俗成，function showSite(str) 括號裏面的 str 顯然就是參數了，if (str=="")這個判斷也就是說參數爲空的時候就 return 出來，中間那一大段跟參數 str 沒啥關係就不理了，最後面那個 xmlhttp.open(“GET”,“getsite_mysql.php?q=”+str,true) 裏面有 str 需要留心關注一下，那個 getsite_mysql.php.php 顯然就是接受數據，移植函數的話要注意更改，那個 true 好像說是設置異步什麼的，不太明白，簡單瞭解了函數，直接複製黏貼就OK啦
先展示一下效果圖
文本框空白點擊【搜索】
文本框輸入【報紙】點擊【搜索】（數據庫有報紙的信息）
文本框輸入【啦啦啦】點擊【搜索】（數據庫沒有啦啦啦的信息）
在文本框輸入【報紙】，然後點擊搜索按鈕就可以在下面看到一個表格，表格顯示的【ID】【可回收垃圾】內容是要查詢數據庫後得出來的，如果文本框輸入的東西數據庫裏面沒有，那就顯示【不知道】
下面就是直接看代碼了
HTML全部代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>簡單交互</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","mysql.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<label for="rec"><strong>我要查詢</strong></label>//laber其實有沒有都不差，聽說是方便人點擊用的
<br>//換行操作，屢試不爽
<input id="litter" type="text" placeholder="報紙"/>
//id 這個很關鍵，後面函數調用的參數要用到， placeholder 就是文本框爲空時顯示的東西
<input type="submit" value="搜索" onclick="showSite(litter.value)"/>
//onclick 點擊觸發函數運行，通過【.litter】指定 id="litter" 的文本框，【.value】指定文本框的輸入內容
<br>
<div id="txtHint"><b>網站信息顯示在這裏……</b></div>
//這裏也很關鍵，這裏是 HTML 顯示數據表格的地方，函數裏面用到
</body>
</html>
PHP全部代碼
<?php
$gett = $_GET["q"];
//獲取數據，那個q寫在函數xmlhttp.open("GET","mysql.php?q="+str,true)這裏面，我驚呆了，根本不像話
$con = mysqli_connect('192.168.x.xxx:3306','yonghu','mima');
//這裏是數據庫操作基本的語句，連接MySQL數據庫，需要寫數據庫地址，管理數據庫的賬號和密碼
//這裏提一個醒，如果是MySQL聽說是密碼賬戶加密了，當初在ubantu上安裝時設置的賬號密碼不能用
//我只能設置一個遠程的賬戶，給所有權限，參考網址：https://bbs.csdn.net/topics/340186098
if (!$con)
{
die('Could not connect: ' . mysqli_error($con));
}
// 選擇數據庫
mysqli_select_db($con,"mydb");
// 設置編碼，防止中文亂碼
mysqli_set_charset($con, "utf8");
// 這裏講一下，litter_classify是數據表（table）名字，where的就是找litter_name=【報紙】的那一行
//直接寫 '$get' 也可以的，加兩個點我要幹哈
$sql="SELECT * FROM litter_classify WHERE litter_name = '".$gett."'";
//這是MySQL執行語句，很important的，敲黑板!!!
//可以採用變量 $sql 形式
//也可以直接MySQL語句直接幹"SELECT * FROM litter_classify WHERE litter_name = '報紙'"
$result = mysqli_query($con,$sql);
//php的 echo 語句功能非常的強大，可以寫HTML語句，加個class id 的還能設置css樣式，amazing！！！
//html 的table 是表格 ，tr是表格的一行，th是表頭，td是表的單元格
//注意用 echo 要把HTML語句打完整，有頭有尾</table></table>，注意一下
//border=“1” 是設置表的邊框
echo "<table border='1'>
<tr>
<th>ID</th>
<th>垃圾</th>
<th>分類</th>
</tr>";
//這個 while 循環很精髓，打印表格必備 $row[]括號裏面寫的是數據庫的列名，需要哪一列寫哪一列
//那個格式要寫對，不要漏點，漏引號之類的
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['litter_id'] . "</td>";
echo "<td>" . $row['litter_name'] . "</td>";
echo "<td>" . $row['litter_style'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);//有始有終，又開有關，釋放資源
?>
數據庫方面
代碼裏面有解析，講得很詳細了哈，HTML文件和PHP文件要放在同一個目錄下，這個不需要我說了吧，要不然的話，函數那個PHP路徑也要改，./ …/ 上級目錄，上上級目錄這些之類的不講了
安裝MySQL，數據庫建表，插入數據什麼這一類的，還有MySQL語句啥的應該不需要我了吧，那太多東西了，見好就收哈，有問題可以問，本人水平那就那樣，能解答就解答
-----------------------===--------------------------------------------------------------------------------------------------------------
如果以上有哪裏不對，或者有錯的歡迎指正，emmmmm
最後推薦一下
學習製作網頁的話，我覺得三個網站比較不錯，菜鳥教程， w3school ，PHP中文網，很多幹貨，希望對你們學習有幫助，嘻嘻嘻