PHP AJAX - 访问数据库 - PHP 中级教程

AJAX 用于创建交互性更强的应用程序

数据库( MySQL) 可以提供数据存储服务

PHP 可以为 AJAX 提供后端支持，连接到 MySQL 数据库返回数据查询结果

PHP AJAX 数据库 - 查询客户

你可以在下面的选择框选择一个公司，然后查询该公司相关信息

这个范例演示了网页如何通过 AJAX 从数据库读取信息

选择对应选项，用户信息会显示在这……

编程开发

我们可以从上面的范例看到我们实现的小应用功能如何

现在，我们就一步一步来实现这个小应用

1. 首先准备数据表

首先在本地的 MySQL 中新建一个数据库 twle 然后再新建一个表 sites，表中的数据如下

mysql> use twle;
Query OK, 0 rows affected (0.01 sec)

mysql> select * from sites;
+----+-----------+----------------------+--------+-------+
| id | name      | url                  | alexa  |country|
+----+-----------+----------------------+--------+-------+
| 1  | 百度    | https://www.baidu.cm/   | 1      | CN    |
| 2  | 淘宝    | https://www.taobao.com/ | 3      | CN    |
| 3  | 简单教程 | https://www.twle.cn/    | 100000 | CN    |
| 4  | 微博    | http://weibo.com/       | 8      | CN    |
| 5  | 腾讯    | https://www.qq.com/     | 2      | CN    |
+----+-----------+-------------------------+--------+-----+
5 rows in set (0.01 sec)

mysql>

你可以点击 sites.sql 下载我们要用到的 site.sql 文件

2. 创建前端页面

新建一个 PHP 文件 php_ajax_db_form.php 文件并输入以下内容

在这个页面中，当用户在下拉列表中选择某位用户时，会触发 onchange 事件运行名为 "showSite()" 的函数

php_ajax_db_form.php

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>简单编程(twle.cn)</title> 
<style>
  table,th,td {border:1px solid #dddddd;padding:5px 10px;border-collapse: collapse;}
</style>
<script>
function showSite(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }  
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for 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","/php_ajax_db.php?q="+str,true);
xmlhttp.send();
}
</script>
<p>PHP 基础教程 - 简单教程(www.twle.cn)</p>
<form action=""> 
<select name="users" onchange="showSite(this.value)">
<option value="">选择一个网站:</option>
<option value="1">百度</option>
<option value="2">淘宝</option>
<option value="3">简单教程</option>
<option value="4">微博</option>
<option value="5">腾讯</option>
</select>
</form>
<br><div id="txtHint">选择对应选项，用户信息会显示在这……</div>

showSite() 函数会执行以下步骤：

检查是否有网站被选择
创建 XMLHttpRequest 对象
创建在服务器响应就绪时执行的函数
向服务器上的文件发送请求
请注意添加到 URL 末端的参数（q）（包含下拉列表的内容）

后端 PHP 查询数据库

我们的前端页面通过 AJAX 调用 php_ajax_db.php 文件来查询站点信息

php_ajax_db.php 会访问本地的 MySQL 数据库并查询相关站点的信息，然后返回 HTML table 作为结果

我们假设 MySQL 数据服务器信息如下

属性	值
host	127.0.0.1
user	root
password	""
database	twle

php_ajax_db.php

<?php
$q = isset($_GET["q"]) ? intval($_GET["q"]) : '';

if(empty($q)) {
    echo '请选择一个网站';
    exit;
}


$db = new PDO('mysql:host=127.0.0.1;dbname=twle;', 'root', '',array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'UTF8';"));

if ( !$db )
{
    die('Could not connect to mysql 127.0.0.1  ');
}

$id = intval($q);

$sql = "SELECT * FROM sites WHERE id = ?";


$stmt = $db->prepare($sql);
$stmt->execute(array($id));

$rs = $stmt->fetch(PDO::FETCH_ASSOC);

if ( empty($rs))
{
    echo 'not found';
    exit;
}

echo "<table>
<tr>
<th>ID</th>
<th>网站名</th>
<th>网站 URL</th>
<th>Alexa 排名</th>
<th>国家</th>
</tr>";

echo "<tr>";
echo "<td>" . $rs['id'] . "</td>";
echo "<td>" . $rs['name'] . "</td>";
echo "<td>" . $rs['url'] . "</td>";
echo "<td>" . $rs['alexa'] . "</td>";
echo "<td>" . $rs['country'] . "</td>";
echo "</tr>";
echo "</table>";

当查询从 JavaScript 发送到 PHP 文件时

PHP 打开一个到 MySQL 数据库的连接
找到选中的用户
创建 HTML 表格，填充数据，并发送回 "txtHint" 占位符

演示

运行上面的 PHP 范例，演示如下