Ajax PHP 边学边练之三数据库

Ajax PHP 边学边练之三涉及数据库操作，通常包括使用PHP连接数据库、执行SQL查询（如增删改查）、通过Ajax异步请求与服务器交互数据，实现无刷新更新页面内容等功能。

Ajax PHP 边学边练之三数据库

一、环境搭建与准备

在开始使用 Ajax 和 PHP 进行数据库操作之前，需要确保本地开发环境已经搭建好，常见的环境搭建组合是 Apache + MySQL + PHP（简称 AMP），可以使用 XAMPP、WampServer 等集成软件包来快速搭建环境。

（一）安装 XAMPP

1、从 Apache Friends 网站下载适合操作系统版本的 XAMPP 安装包。

2、运行安装程序，按照提示完成安装，在安装过程中，可以选择安装路径等选项。

3、安装完成后，启动 XAMPP 控制面板，点击“Start”按钮启动 Apache 和 MySQL 服务。

（二）创建数据库

1、打开浏览器，在地址栏输入“http://localhost/phpmyadmin”，进入 phpMyAdmin 管理界面（前提是在 XAMPP 安装过程中选择了安装 phpMyAdmin）。

2、使用默认的用户名“root”和空密码登录（如果是自定义安装，需根据设置的用户名和密码登录）。

3、在左侧导航栏中选择“数据库”选项卡，点击“创建数据库”按钮，输入数据库名称（如“test_db”），排序规则选择“utf8_unicode_ci”，然后点击“创建”按钮。

二、数据库连接

在 PHP 中操作数据库，首先需要建立与数据库的连接，这通常通过mysqli 或PDO 扩展来实现。

（一）使用 `mysqli` 连接数据库

以下是一个简单的示例代码，用于连接到前面创建的“test_db”数据库：

|代码|功能|

|—-|—-|

|“`php

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "test_db";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {

die("连接失败: " . $conn->connect_error);

echo "连接成功";

|解释|展示如何通过mysqli 对象连接到本地数据库，并检查连接是否成功，如果连接失败，会输出错误信息并终止脚本执行；如果成功，则输出“连接成功”。|
（二）使用PDO 连接数据库PDO 是一种更灵活、更安全的数据库访问方式，支持多种数据库类型，以下是使用PDO 连接数据库的示例：
|代码|功能|
|----|----|
|```php
try {
    $dsn = 'mysql:host=localhost;dbname=test_db';
    $username = 'root';
    $password = '';
    $options = array(
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    );
    $pdo = new PDO($dsn, $username, $password, $options);
    echo "连接成功";
} catch (PDOException $e) {
    die("连接失败: " . $e->getMessage());
}

|解释|通过PDO 构造函数传递数据源名称（DSN）、用户名、密码和选项数组来创建数据库连接，如果连接出现异常，会捕获异常并输出错误信息；否则输出“连接成功”。|

三、执行 SQL 语句

连接数据库后，就可以使用 PHP 执行各种 SQL 语句，如查询、插入、更新和删除数据。

（一）查询数据

以下是使用mysqli 执行查询操作的示例：

|代码|功能|

|—-|—-|

|“`php

$sql = "SELECT id, name FROM users";

$result = $conn->query($sql);

if ($result->num_rows > 0) {

while($row = $result->fetch_assoc()) {

echo "id: " . $row["id"]. " Name: " . $row["name"]. "<br>";

}

} else {

echo "0 结果";

$conn->close();

|解释|先定义要执行的 SQL 查询语句，然后使用query 方法执行查询，并将结果存储在$result 变量中，通过判断结果集的行数是否大于 0 来确定是否有数据返回，如果有数据，使用fetch_assoc 方法逐行获取数据，并以指定格式输出；如果没有数据，则输出“0 结果”，最后关闭数据库连接。|
（二）插入数据
使用mysqli 插入数据的示例如下：
|代码|功能|
|----|----|
|```php
$sql = "INSERT INTO users (name, email) VALUES ('John', 'john@example.com')";
if ($conn->query($sql) === TRUE) {
    echo "新记录插入成功";
} else {
    echo "错误: " . $sql . "<br>" . $conn->error;
}
$conn->close();

|解释|定义插入数据的 SQL 语句，其中包含要插入的表名（users）和对应的列值（name 和email），使用query 方法执行插入操作，并根据返回值判断插入是否成功，如果成功，输出“新记录插入成功”；如果失败，输出错误信息和 SQL 语句，最后关闭数据库连接。|

四、结合 Ajax 实现异步数据交互

Ajax 可以实现页面局部刷新，无需重新加载整个页面就能与服务器进行数据交互，下面介绍如何使用 Ajax 与 PHP 配合实现数据的异步获取和显示。

（一）前端 HTML 和 JavaScript 代码

以下是一个简单的 HTML 页面，包含一个按钮和一个用于显示数据的容器：

|代码|功能|

|—-|—-|

|“`html

<title>Ajax 与 PHP 数据库交互</title>

$(document).ready(function(){

$("#loadData").click(function(){

$.ajax({

url: ‘get_data.php’,

type: ‘GET’,

success: function(data){

$("#dataContainer").html(data);

error: function(){

$("#dataContainer").html("数据加载失败");

}

});

</script>

|解释|创建一个按钮，当点击该按钮时，通过$.ajax 方法向服务器端的get_data.php 文件发送一个 GET 请求，在请求成功时，将返回的数据填充到dataContainer 容器中；如果请求失败，则显示“数据加载失败”，这里使用了 jQuery 库来简化 Ajax 操作。|
（二）服务器端 PHP 代码（get_data.php）
以下是get_data.php 文件的示例代码，用于从数据库中查询数据并返回给前端：
|代码|功能|
|----|----|
|```php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test_db";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
$sql = "SELECT id, name FROM users";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "id: " . $row["id"]. " Name: " . $row["name"]. "<br>";
    }
} else {
    echo "0 结果";
}
$conn->close();
?>

|解释|这段代码与前面在 PHP 中执行查询操作的代码类似，只是将其单独放在一个文件中，以便被前端通过 Ajax 请求调用，它连接到数据库，执行查询语句，并将结果以 HTML 格式输出，供前端接收和显示。|

五、相关问题与解答

（一）问题 1：在使用mysqli 连接数据库时，如果出现“Access denied for user ‘root’@’localhost’ (using password: NO)”错误，应该如何解决？

解答：这种错误通常是由于数据库用户认证出现问题导致的，可以按照以下步骤排查和解决：

1、确认在数据库连接代码中填写的用户名和密码是否正确，特别是在使用 XAMPP 等集成环境时，默认情况下可能没有设置密码，但如果修改过密码，需要在连接代码中正确填写新密码。

2、检查 MySQL 用户的权限设置，可以通过以下命令查看用户权限：

SELECT  FROM mysql.user WHERE User='root';

如果发现权限不足，可以使用以下命令授予权限：

GRANT ALL PRIVILEGES ON . TO 'root'@'localhost' IDENTIFIED BY 'your_password' WITH GRANT OPTION;
FLUSH PRIVILEGES;

your_password 为你设置的实际密码，执行完上述命令后，重新启动 MySQL 服务使更改生效。

3、如果使用的是 Linux 系统，还需要检查 MySQL 配置文件（如my.cnf）中的用户认证设置，确保配置正确。

（二）问题 2：如何在 Ajax 请求中处理跨域问题？

解答：当前端页面和服务器端 PHP 文件不在同一个域名下时，就会出现跨域问题，可以通过以下几种方法来解决：

1、JSONP 方式：JSONP 是一种利用<script> 标签的开放策略来实现跨域请求的方法，在服务器端 PHP 文件中，将响应数据包装在一个回调函数中返回，

header('Content-Type: application/json');
$response = array('id' => 1, 'name' => 'John');
echo 'callback(' . json_encode($response) . ')';
?>

在前端 Ajax 请求中，设置dataType 为jsonp，并指定回调函数名：

$.ajax({
    url: 'https://otherdomain.com/get_data.php',
    type: 'GET',
    dataType: 'jsonp',
    jsonpCallback: 'callback', // 指定回调函数名，与服务器端返回的一致
    success: function(data){
        console.log(data);
    },
    error: function(){
        console.log("跨域请求失败");
    }
});

2、CORS 方式：在服务器端设置适当的 CORS 头信息，允许特定域名的跨域请求，在 PHP 文件中添加以下代码：

header('Access-Control-Allow-Origin: '); // 允许所有域名访问，也可以指定特定域名
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
header('Access-Control-Allow-Headers: Content-Type');

在前端 Ajax 请求中，正常发送请求即可，不需要额外设置。

$.ajax({
    url: 'https://otherdomain.com/get_data.php',
    type: 'GET',
    success: function(data){
        console.log(data);
    },
    error: function(){
        console.log("跨域请求失败");
    }
});

需要注意的是，在实际生产环境中，不建议使用Access-Control-Allow-Origin:，而应该指定允许访问的具体域名，以提高安全性。

原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1647429.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。