PHP+MySQL+Ajax實現前端頁面展示資料庫的資料
昨天發現一款資料庫管理軟體：Navicat for MySQL，一款強大的 MySQL 資料庫管理和開發工具，這款軟體使用了極好的圖形使用者介面（GUI），可以用一種安全和更為容易的方式快速和容易地新建資料庫、新建表等。前端學習過程中一直對後臺如何從資料庫讀取資料，以及後臺提供給前端介面等問題比較感興趣，藉此機會，嘗試了一下新建資料庫和表，用PHP從建好的資料庫中讀取資料，並在前端用Ajax將資料展示出來等，做一個記錄，為後續學習鋪路。
1、使用Navicat for MySQL建立資料庫和表
Navicat for MySQL使用起來十分簡單，不用像PHP建立資料庫和表的時候需要寫程式碼來完成，具體操作此處不再詳細介紹，可以參考以下網址進行建立：
建立好的資料庫和表如下圖所示：
2、使用PHP從 MySQL 資料庫讀取資料
以下例項中我們從student資料庫的studentinfo表讀取了studentID,studentName,class,department和 teleNumber列的資料並顯示在頁面上：
<?php
//header("Content-type=text/html;charset=utf-8");
//header('Content-type:text/json');
$servername = "localhost";
$username = "root";
$password = "";
$dbname 以上程式碼解析如下:
首先，設定了 SQL 語句從 MyGuests資料表中讀取 id, firstname 和 lastname 三個欄位。之後我們使用改 SQL 語句從資料庫中取出結果集並賦給複製給變數 $result。
函式 num_rows() 判斷返回的資料。
如果返回的是多條資料，函式 fetch_assoc() 將結合集放入到關聯陣列並迴圈輸出。 while() 迴圈出結果集，並輸出 id, firstname 和 lastname 三個欄位值。
過程中遇到的問題：
（1）PHP從資料庫讀取的資料中文顯示的是”?”，解決方法：
mysqli_query($conn, 'set names utf8')後中文變為Unicode的編碼
（2）Unicode的編碼改成中文的方法：
json_encode($row,JSON_UNESCAPED_UNICODE).' ';
3、使用Ajax將資料展示在前端頁面
程式碼如下：
<!DOCTYPE html>
<html ng-app = 'test'>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type=text/html;charset=utf-8"/>
<!-- jQuery -->
<script type="text/javascript" src="http://code.changer.hk/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
.table{
width: 1000px;
text-align: center;
}
</style>
<title>學生資訊管理</title>
</head>
<body ng-controller = 'main'>
<div class="">
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>學號</td>
<td>姓名</td>
<td>班級</td>
<td>學院</td>
<td>電話</td>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
</div>
</body>
<script type="text/javascript">
$.ajax({
type: 'POST',
url: 'studentInfo.php',
data:{
},
success: function (data) {
//console.log(data);
var a = data.split(' ');
//console.log(a);
var trStr = '';//動態拼接table
for (var i = 0; i < a.length-1; i++) {
trStr += '<tr class="example">';
trStr += '<td width="15%">' + JSON.parse(a[i]).studentID + '</td>';
trStr += '<td width="15%">' + JSON.parse(a[i]).studentName + '</td>';
trStr += '<td width="15%">' + JSON.parse(a[i]).class + '</td>';
trStr += '<td>' + JSON.parse(a[i]).department + '</td>';
trStr += '<td>' + JSON.parse(a[i]).teleNumber + '</td>';
trStr += '</tr>';
}
$("#tbody").html(trStr);
}
});
</script>
</html>最終實現效果：
以上內容僅僅作為前端、後臺和資料庫進行連線的演示，談不上前後臺數據互動，還有很多內容需要擴充套件，比如資料的增刪改等操作，後續空閒之餘可以自娛自樂一下。