首页 参考手册 笔记

PHP 教程
PHP 教程 PHP简介 PHP安装 PHP语法 PHP变量 PHP echo/print PHP数据类型 PHP常量 PHP 字符串 PHP 运算符 PHP If...Else PHP Switch PHP 数组 PHP 数组排序 PHP 超级全局变量 PHP While 循环 PHP For 循环 PHP 函数 PHP 魔术变量 PHP 命名空间 PHP 面向对象

PHP XML

PHP Expat Parser PHP XML DOM PHP SimpleXML

PHP 与 AJAX

AJAX 简介 AJAX PHP AJAX 数据库 AJAX XML AJAX 实时搜索 AJAX RSS Reader AJAX 投票

PHP 数据库

PHP MySQL 简介 PHP MySQL 连接 PHP MySQL 创建数据库 PHP MySQL 创建数据表 PHP MySQL 插入数据 PHP MySQL 插入多条数据 PHP MySQL 预处理语句 PHP MySQL 读取数据 PHP MySQL Where PHP MySQL Order By PHP MySQL Update PHP MySQL Delete PHP ODBC

PHP 7 新特性

PHP 7 新特性

PHP 高级教程

PHP 多维数组 PHP 多维数组 PHP 日期 PHP 包含 PHP 文件 PHP 文件上传 PHP Cookie PHP Session PHP E-Mail PHP 安全 E-mails PHP Error PHP Exception PHP 过滤器 PHP 高级过滤器 PHP JSON

PHP 表单

PHP 表单 PHP 表单验证 PHP 表单 - 必需字段 PHP 表单 - 验证邮件和URL PHP 完整表单实例 PHP $_GET 变量 PHP $_POST 变量

PHP 参考手册

PHP 5 Array 函数 PHP 5 Calendar 函数 PHP cURL 函数 PHP 5 Date/Time 函数 PHP 5 Directory 函数 PHP Error 和 Logging 函数 PHP 5 Filesystem 函数 PHP Filter 函数 PHP FTP 函数 PHP HTTP 函数 PHP Libxml 函数 PHP Mail 函数 PHP 5 Math 函数 PHP 杂项 函数 PHP 5 MySQLi 函数 PHP PDO PHP 5 SimpleXML 函数 PHP 5 String 函数 PHP XML Parser 函数 PHP Zip File 函数 PHP 5 时区 PHP 图像处理 PHP RESTful PHP PCRE

PHP - AJAX 与 MySQL

AJAX 可用来与数据库进行交互式通信。

AJAX 数据库实例

下面的实例将演示网页如何通过 AJAX 从数据库读取信息：

本教程使用到的 Websites 表 SQL 文件：

/*
 Navicat MySQL Data Transfer

 Source Server         : 127.0.0.1
 Source Server Version : 50621
 Source Host           : localhost
 Source Database       : jb51

 Target Server Version : 50621
 File Encoding         : utf-8

 Date: 05/18/2016 11:44:07 AM
*/

SET NAMES utf8;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
--  Table structure for `websites`
-- ----------------------------
DROP TABLE IF EXISTS `websites`;
CREATE TABLE `websites` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` char(20) NOT NULL DEFAULT '' COMMENT '站点名称',
  `url` varchar(255) NOT NULL DEFAULT '',
  `alexa` int(11) NOT NULL DEFAULT '0' COMMENT 'Alexa 排名',
  `country` char(10) NOT NULL DEFAULT '' COMMENT '国家',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

-- ----------------------------
--  Records of `websites`
-- ----------------------------
BEGIN;
INSERT INTO `websites` VALUES ('1', 'Google', 'https://www.google.cm/', '1', 'USA'), ('2', '淘宝', 'https://www.taobao.com/', '13', 'CN'), ('3', '脚本之家', 'http://www.jb51.net/', '1038', 'CN'), ('4', '微博', 'http://weibo.com/', '20', 'CN'), ('5', 'Facebook', 'https://www.facebook.com/', '3', 'USA');
COMMIT;

SET FOREIGN_KEY_CHECKS = 1;

实例


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

实例解释 - 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.jb51.net/    | 1038  | CN      |
| 4  | 微博       | http://weibo.com/         | 20    | CN      |
| 5  | Facebook     | https://www.facebook.com/ | 3     | USA     |
+----+--------------+---------------------------+-------+---------+
5 rows in set (0.01 sec)

实例解释 - HTML 页面

当用户在上面的下拉列表中选择某位用户时，会执行名为 "showSite()" 的函数。该函数由 "onchange" 事件触发：

test.html 文件代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>脚本之家(jb51.net)</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() 函数会执行以下步骤：

  • 检查是否有网站被选择
  • 创建 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" 占位符