惠州阿里云代理商：ajax短连接数据库-优快云博客

本文链接：https://blog.youkuaiyun.com/aliyuncloud/article/details/136558489

惠州阿里云代理商：ajax短连接数据库

简介：飞机@luotuoemo
本文由（腾讯云国际站代理商：【聚搜云】www.jintui.cn ）撰写

响应方法

在这里，我们假设您已经了解了基本的 AJAX 和 PHP，并且您已经有一个工作的数据库。

首先，让我们创建一个名为 getuser.php 的文件，该文件将从数据库获取用户数据并返回结果。该文件应该具有以下内容：

<?php // 定义数据库连接常量
define(‘DB_HOST’, ‘localhost’);
define(‘DB_USER’, ‘root’);
define(‘DB_PASS’, ”);
define(‘DB_NAME’, ‘ajax_demo’);

// 连接数据库
$connect = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);

// 检查数据库连接是否成功
if (mysqli_connect_errno($connect)) {

die("连接失败: " . mysqli_connect_error());

}

// 获取用户数据
$result = mysqli_query($connect, “SELECT * FROM users”);

// 把查询结果转换为 JSON 格式的数组
$userData = array();
while ($row = mysqli_fetch_array($result)) {
$userData[] = $row;
}
echo json_encode($userData);

// 关闭查询结果和数据库连接
mysqli_free_result($result);
mysqli_close($connect);
?>

接下来，让我们编写一个 AJAX 请求，该请求将向 getuser.php 文件发送 GET 请求，并在成功时将响应输出到页面上。

jQuery 的 Ajax

jQuery 提供了一个方便的方式来执行 AJAX 请求，并在响应时更新 DOM。以下是一个使用 jQuery 的示例：

<!DOCTYPE html>
<html>
<head>

<title>Ajax 短连接数据库</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

</head>
<body>

<h2>用户信息</h2> 
<table id="userTable" border="1"> 
    <tr> 
        <th>ID</th> 
        <th>姓名</th> 
        <th>年龄</th> 
        <th>电子邮件</th> 
    </tr> 
</table> 

<script> 
    // 定义获取用户数据的函数
    function getUsers() { 
        // 发送 AJAX 请求并获取响应 
        $.get("getuser.php", function(data) { 
            // 把响应转换为 JSON 对象
            var json = JSON.parse(data); 

            // 遍历 JSON 对象并在表格中显示用户数据 
            var html = ""; 
            for(var i=0; i < json.length; i++) { 
                html += "<tr>"; 
                html += "<td>" + json[i].id + "</td>"; 
                html += "<td>" + json[i].name + "</td>"; 
                html += "<td>" + json[i].age + "</td>"; 
                html += "<td>" + json[i].email + "</td>"; 
                html += "</tr>"; 
            } 
            $("#userTable").append(html); 
        }); 
    } 

    // 在页面加载完后执行获取用户数据的函数
    $(document).ready(getUsers);
</script>

</body>
</html>

该示例将显示一个表格，其中包含从 getuser.php 文件获取的用户数据。当页面加载完成时，它将自动调用 getUsers() 函数，并向服务器发送一个 GET 请求。在成功时，它将迭代 JSON 对象中的每个用户，并将 HTML 插入表格行。

实现方式有多种，以下是其中一种简单的实现方法：

1.在前端页面通过ajax发送短连接请求；

2.后端接收到请求后，将请求参数存入数据库中，并返回一个标识符id给前端；

3.前端通过定时器不断向后端发送请求，传递当前id，后端根据id查询数据库并返回对应的结果；

4.前端收到返回结果后更新页面。

代码示例：

前端：

//发送短连接请求
$.ajax({
    url: 'backend.php',
    type: 'post',
    data: { action: 'create' },
    success: function(id){
        //保存id
        localStorage.setItem('shortLinkId', id);
    }
});

//定时器请求结果
setInterval(function(){
    //获取当前id
    var id = localStorage.getItem('shortLinkId');
    if(id){
        //发送查询请求
        $.ajax({
            url: 'backend.php',
            type: 'post',
            data: { action: 'query', id: id },
            success: function(result){
                if(result){
                    //更新页面
                    $('.result').html(result);
                }
            }
        });
    }
}, 1000);

后端：

//连接数据库
$conn = mysqli_connect("localhost", "root", "", "test");

//创建短连接
if($_POST['action'] == 'create'){
    $id = uniqid();
    mysqli_query($conn, "INSERT INTO short_links(id, status) VALUES ('$id', 0)");
    echo $id;
}

//查询短连接结果
if($_POST['action'] == 'query'){
    $id = $_POST['id'];
    $result = mysqli_query($conn, "SELECT * FROM short_links WHERE id='$id'");
    $row = mysqli_fetch_assoc($result);
    if($row['status'] == 1){
        echo $row['result'];
        //删除记录
        mysqli_query($conn, "DELETE FROM short_links WHERE id='$id'");
    }
}

数据库表结构：

CREATE TABLE `short_links` (
  `id` varchar(32) NOT NULL,
  `status` tinyint(1) NOT NULL DEFAULT '0',
  `result` text,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

说明：

该示例中的后端代码为简化版，实际应用中需要考虑多线程、多进程等并发问题，并采用更加健壮的代码来处理请求和结果的存储和查询。此外，还需要考虑短连接的有效期、安全性等问题。

发布者tg：luotuoemo，转转请注明出处：https://www.jintuiyun.com/158124.html