PHP+Mysql+jQuery实现动态展示信息

下面是 “PHP+Mysql+jQuery实现动态展示信息”的攻略，我会从以下方面进行详细讲解：

1. 前期准备工作
2. 创建数据库和表格
3. 编写PHP代码
4. 使用jQuery实现动态展示信息
5. 示例说明

1. 前期准备工作

在开始编写代码之前，你需要一个根据自己需求来决定的项目文件夹，建议在项目文件夹内创建三个文件夹，分别是：js、css、images，用于存放项目需要的JavaScript文件、CSS文件以及图片文件等静态资源。

2. 创建数据库和表格

在开始编写PHP代码之前，你需要创建一个包含有相关数据的数据库和表格。一般来说，我们使用MySQL数据库作为数据存储的工具，可以在MySQL数据库软件中的GUI界面上创建数据库和表格，或者使用SQL语句创建。这里为了方便，我们假设已经创建好了名为“mydatabase”的数据库，并在其中创建了名为“information”的表格，其中包含有三个字段分别为id、name和email。

3. 编写PHP代码

接下来，我们需要编写PHP代码来实现向数据库中插入和展示数据。首先，我们需要编写一个保存新数据至数据库的PHP代码，代码如下：

<?php
// 获取表单提交的数据
$name = $_POST['name'];
$email = $_POST['email'];

// 连接数据库
$mysqli = new mysqli('localhost', 'root', '123456', 'mydatabase');
if ($mysqli->connect_error) {
    die('Connect Error (' . $mysqli->connect_errno . ') '
            . $mysqli->connect_error);
}

// 添加数据到数据库
$result = $mysqli->query("INSERT INTO information (name, email) VALUES ('$name', '$email')");
if (!$result) {
    die('Invalid query: ' . $mysqli->error);
}

echo '插入数据成功';

// 关闭连接
$mysqli->close();
?>

接着，我们需要编写从数据库中获取数据并展示的PHP代码，代码如下：

<?php
// 连接数据库
$mysqli = new mysqli('localhost', 'root', '123456', 'mydatabase');
if ($mysqli->connect_error) {
    die('Connect Error (' . $mysqli->connect_errno . ') '
            . $mysqli->connect_error);
}

// 获取数据库中的数据
$result = $mysqli->query('SELECT * FROM information');
if (!$result) {
    die('Invalid query: ' . $mysqli->error);
}

// 将数据封装成数组
$data = array();
while ($row = $result->fetch_assoc()) {
    $data[] = $row;
}

// 输出数据
header('Content-type: application/json');
echo json_encode($data);

// 关闭连接
$mysqli->close();
?>

4. 使用jQuery实现动态展示信息

前面我们已经编写好了保存新数据和获取数据的PHP代码，接下来使用jQuery完成动态展示数据部分的功能。首先，我们需要准备一个显示数据的HTML页面，在HTML页面中添加以下代码：

<div id="info"></div>

然后我们编写jQuery代码，使用Ajax从PHP文件中获取数据并动态展示到HTML页面中，代码如下：

$(document).ready(function() {
    // 从服务器中获取数据
    $.ajax({
        url: 'getData.php',
        type: 'GET',
        success: function(response) {
            console.log(response);

            var data = response;
            var html = '';

            // 完成每个数据块的HTML拼接
            for(var i = 0; i < data.length; i++) {
                html += '<div>';
                html += '<h3>' + data[i].name + '</h3>';
                html += '<p>' + data[i].email + '</p>';
                html += '</div>';
            }

            // 将数据块插入到HTML页面中
            $('#info').html(html);
        },
        error: function(err) {
            console.log('请求数据失败');
        }
    });
});

使用以上代码，我们即可从服务器中获取数据并动态展示到HTML页面中。

5. 示例说明

下面是使用以上攻略实现的两个示例：

示例 1

假设我们要为一个论坛网站添加一个用户注册功能，用户注册时需要提供用户名和邮箱地址。用户填写完注册信息后，点击“提交”按钮，使用Ajax向服务器提交数据，并刷新数据展示区域，用于显示新注册用户的信息。

示例 2

假设我们要为一个电商网站添加一个评论功能，用户在某个商品详情页下方填写评论内容，点击“提交”按钮，使用Ajax向服务器提交数据，并刷新数据展示区域，用于显示该商品下的所有评论信息。