如何用AJAX/JQuery根据URL中的ID从数据库更新HTML元素

要实现需求，你需要后端接口提供数据+前端AJAX请求数据并更新页面，以下是具体步骤：

1. 编写后端接口（以PHP为例） #

先写一个后端脚本（比如get_product.php），负责接收ID、查询数据库tbl_product，返回JSON格式的产品数据：

<?php
// 数据库连接配置（根据你的实际信息修改）
$conn = mysqli_connect("localhost", "your_username", "your_password", "your_db_name");

// 获取前端传递的产品ID
$product_id = $_GET['id'];

// 预处理查询，防止SQL注入
$query = "SELECT product_desc, product_feature, product_spec FROM tbl_product WHERE id = ?";
$stmt = mysqli_prepare($conn, $query);
mysqli_stmt_bind_param($stmt, "i", $product_id);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
$product = mysqli_fetch_assoc($result);

// 返回JSON格式数据
header('Content-Type: application/json');
echo json_encode($product);

// 关闭数据库连接
mysqli_close($conn);
?>

2. 修改前端jQuery代码 #

优化原有重复逻辑，添加AJAX请求逻辑，实现数据加载与页面更新：

var url = window.location.pathname;
var id = url.substring(url.lastIndexOf('/') + 1);

$(document).ready(function() {
    // 通用函数：切换按钮状态+加载对应内容
    function loadContent(type) {
        // 统一处理按钮active类切换
        $("#desc, #feature, #spec").removeClass('active');
        $("#" + type).addClass('active');
        
        // 发送AJAX请求获取数据
        $.ajax({
            url: 'get_product.php',
            type: 'GET',
            data: { id: id },
            dataType: 'json',
            success: function(res) {
                // 根据按钮类型更新内容区域
                switch(type) {
                    case 'desc':
                        $("#content").html(res.product_desc);
                        break;
                    case 'feature':
                        $("#content").html(res.product_feature);
                        break;
                    case 'spec':
                        $("#content").html(res.product_spec);
                        break;
                }
            },
            error: function() {
                $("#content").html('加载失败，请稍后重试');
            }
        });
    }

    // 绑定按钮点击事件
    $("#desc").click(() => loadContent('desc'));
    $("#feature").click(() => loadContent('feature'));
    $("#spec").click(() => loadContent('spec'));

    // 页面初始化时默认加载描述内容（可选）
    loadContent('desc');
});

关键提示 #

• 后端要根据实际数据库表字段名修改查询语句中的字段（比如product_desc换成你表中对应的描述字段）；
• 如果后端接口和前端不在同一域名下，需要配置跨域允许；
• AJAX的error回调可以根据需求自定义错误提示。

内容的提问来源于stack exchange，提问作者Devlogia