如何在JQuery Ajax请求成功后将路由ID传入PHP查询的Where子句

嘿，看起来你已经搞定了路由ID的存储部分，现在就差把这个ID用到第二个标签页的查询里了对吧？这里有几个靠谱的方案，你可以根据自己的场景选：

方案一：前端临时存储路由ID（最简单直接） #

因为是同一页面的标签切换，完全可以在前端把选中的路由ID存起来，切换标签时直接调用。推荐用sessionStorage（会话级存储，关闭浏览器才清空）或者全局变量，步骤如下：

1. 修改前端jQuery代码，存储ID并触发查询 #

$(document).ready(function () {
    $(".collection-routeselection").click( function(){
        route_id = $(this).attr("value");
        // 把路由ID存到sessionStorage，页面刷新也不会丢
        sessionStorage.setItem("selectedRouteId", route_id);

        jQuery.ajax({
            // 注意：原来的URL有两个?，这是错误的，要改成&
            url: '../data/collecting.php?action=route-selection&routeid='+route_id,
            type: 'POST',
            dataType: 'text',
            data: {'routeid':route_id},
            success: function(data, textStatus, jqXHR) {
                $("#tab1").removeClass("active");
                $("#tab2").addClass("active");
                // 切换到tab2后立刻加载路由详情
                loadRouteDetails();
            },
            error: function(jqXHR, textStatus, errorThrown){
                alert("An error occured when saving the data");
            }
        });
    });

    // 定义加载路由详情的函数
    function loadRouteDetails() {
        var selectedId = sessionStorage.getItem("selectedRouteId");
        if (!selectedId) return;

        // 发起AJAX请求到PHP获取详情
        $.ajax({
            url: '../data/get-route-details.php',
            type: 'POST',
            data: {'routeid': selectedId},
            dataType: 'json',
            success: function(response) {
                // 把返回的结果渲染到tab2的页面元素里
                // 示例：$("#route-id-display").text(response.id_rou);
                // $("#job-type-display").text(response.idjtp_job);
            },
            error: function() {
                alert("Failed to load route details");
            }
        });
    }

    // 监听tab切换事件，切换到tab2时自动加载数据
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        var targetTab = $(e.target).attr("href");
        if (targetTab === "#tab2") {
            loadRouteDetails();
        }
    });

    // 如果页面加载时tab2已经激活，直接加载数据
    if ($("#tab2").hasClass("active")) {
        loadRouteDetails();
    }
});

2. 编写PHP接口get-route-details.php执行查询 #

<?php
// 引入你的数据库连接文件
include('db-connection.php');

if (isset($_POST['routeid'])) {
    $rouid = $_POST['routeid'];
    // 执行你的查询语句，绑定路由ID参数
    $select_stmt = mysqli_prepare($mysqli_scs, "SELECT id_rou,idjtp_job FROM routes_rou WHERE id_rou = ?");
    mysqli_stmt_bind_param($select_stmt, "i", $rouid);
    mysqli_stmt_execute($select_stmt);
    $result = mysqli_stmt_get_result($select_stmt);
    $routeDetails = mysqli_fetch_assoc($result);

    // 返回JSON格式的数据给前端
    echo json_encode($routeDetails);
    mysqli_stmt_close($select_stmt);
} else {
    echo json_encode(['error' => 'No route ID provided']);
}
?>

方案二：从数据库读取最新选中的路由ID #

如果担心前端存储的ID和数据库不一致，或者需要支持页面刷新后恢复状态，可以直接从你已经存储的collectiontracking_ctr表中读取最新的记录：

1. 编写PHP接口get-latest-route.php #

<?php
include('db-connection.php');

// 先查询最新选中的路由ID（按修改时间倒序取第一条）
$select_latest = mysqli_prepare($mysqli_scs, "SELECT idrou_ctr FROM collectiontracking_ctr ORDER BY modified_ctr DESC LIMIT 1");
mysqli_stmt_execute($select_latest);
$result = mysqli_stmt_get_result($select_latest);
$latestRoute = mysqli_fetch_assoc($result);

if ($latestRoute) {
    $rouid = $latestRoute['idrou_ctr'];
    // 再执行路由详情查询
    $select_stmt = mysqli_prepare($mysqli_scs, "SELECT id_rou,idjtp_job FROM routes_rou WHERE id_rou = ?");
    mysqli_stmt_bind_param($select_stmt, "i", $rouid);
    mysqli_stmt_execute($select_stmt);
    $routeDetails = mysqli_fetch_assoc(mysqli_stmt_get_result($select_stmt));

    echo json_encode($routeDetails);
    mysqli_stmt_close($select_stmt);
} else {
    echo json_encode(['error' => 'No selected route found']);
}
mysqli_stmt_close($select_latest);
?>

2. 修改前端loadRouteDetails函数 #

不需要传ID，直接请求这个接口即可：

function loadRouteDetails() {
    $.ajax({
        url: '../data/get-latest-route.php',
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            // 渲染数据到tab2
        },
        error: function() {
            alert("Failed to load route details");
        }
    });
}

方案三：服务器端渲染tab2内容 #

如果你的tab2内容是服务器端生成的，可以在AJAX成功后直接把路由ID作为参数加载tab2的内容：

success: function(data, textStatus, jqXHR) {
    $("#tab1").removeClass("active");
    $("#tab2").addClass("active");
    // 加载tab2的内容，带上路由ID参数
    $("#tab2-content").load('../data/tab2-content.php?routeid='+route_id);
}

对应的tab2-content.php：

<?php
include('db-connection.php');

$rouid = "";
if (isset($_GET['routeid'])) {
    $rouid = $_GET['routeid'];
}

$select_stmt = mysqli_prepare($mysqli_scs, "SELECT id_rou,idjtp_job FROM routes_rou WHERE id_rou = ?");
mysqli_stmt_bind_param($select_stmt, "i", $rouid);
mysqli_stmt_execute($select_stmt);
$result = mysqli_stmt_get_result($select_stmt);
$route = mysqli_fetch_assoc($result);

// 直接输出HTML内容
if ($route) {
    echo "<p>Route ID: " . htmlspecialchars($route['id_rou']) . "</p>";
    echo "<p>Job Type ID: " . htmlspecialchars($route['idjtp_job']) . "</p>";
} else {
    echo "<p>No route details found</p>";
}
?>

注意事项 #

• 务必处理路由ID不存在的情况，避免SQL错误或前端显示异常
• 前端存储时，sessionStorage是会话级，localStorage会永久保存，根据需求选择
• 原AJAX URL的参数格式错误，要把?action=route-selection?routeid=改成?action=route-selection&routeid=，否则第二个参数无法被正确识别

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