如何在jQuery的change事件中通过两个$.get请求更新两个div

没问题，我来帮你梳理下具体的实现步骤和代码示例，完全能满足你要的需求：

前端JavaScript代码示例 #

首先咱们先把基础结构搭起来，包括全局变量、change事件绑定，还有两个$.get请求：

// 定义全局变量存储选中的公司名称
let selectedCompany = '';

// 绑定下拉框的change事件（假设你的下拉框id是companySelect）
$('#companySelect').on('change', function() {
    // 把选中的公司名称存入全局变量
    selectedCompany = $(this).val();

    // 第一个请求：更新第一个div（比如id为div1）
    $.get('fetch_data1.php', { company: selectedCompany }, function(response) {
        // 把返回的内容插入到div1中
        $('#div1').html(response);
    }).fail(function() {
        $('#div1').html('加载信息失败，请稍后重试');
    });

    // 第二个请求：更新第二个div（比如id为div2）
    $.get('fetch_data2.php', { company: selectedCompany }, function(response) {
        // 把返回的内容插入到div2中
        $('#div2').html(response);
    }).fail(function() {
        $('#div2').html('加载信息失败，请稍后重试');
    });
});

后端PHP代码示例 #

接下来是两个处理不同MySQL查询的PHP文件：

第一个PHP文件：fetch_data1.php #

这个文件负责第一个查询，比如获取该公司的基本信息：

<?php
// 连接数据库（替换成你的数据库信息）
$conn = mysqli_connect('localhost', 'username', 'password', 'database_name');

// 校验参数是否存在
if (!isset($_GET['company'])) {
    echo '参数错误';
    exit;
}
$company = $_GET['company'];

// 防止SQL注入，使用预处理语句
$stmt = $conn->prepare("SELECT company_id, address, phone FROM companies WHERE name = ?");
$stmt->bind_param("s", $company);
$stmt->execute();
$result = $stmt->get_result();

// 处理查询结果，生成HTML内容
$output = '<h3>公司基本信息</h3>';
if ($result->num_rows > 0) {
    $row = $result->fetch_assoc();
    $output .= '<p>ID: ' . htmlspecialchars($row['company_id']) . '</p>';
    $output .= '<p>地址: ' . htmlspecialchars($row['address']) . '</p>';
    $output .= '<p>电话: ' . htmlspecialchars($row['phone']) . '</p>';
} else {
    $output .= '<p>未找到该公司信息</p>';
}

// 输出结果给前端
echo $output;

// 关闭资源
$stmt->close();
$conn->close();
?>

第二个PHP文件：fetch_data2.php #

这个文件负责第二个查询，比如获取该公司的员工列表：

<?php
// 连接数据库（替换成你的数据库信息）
$conn = mysqli_connect('localhost', 'username', 'password', 'database_name');

// 校验参数是否存在
if (!isset($_GET['company'])) {
    echo '参数错误';
    exit;
}
$company = $_GET['company'];

// 先获取公司ID（关联员工表的外键）
$stmt = $conn->prepare("SELECT company_id FROM companies WHERE name = ?");
$stmt->bind_param("s", $company);
$stmt->execute();
$companyResult = $stmt->get_result();

if ($companyResult->num_rows === 0) {
    echo '<p>未找到该公司信息</p>';
    $stmt->close();
    $conn->close();
    exit;
}

$companyRow = $companyResult->fetch_assoc();
$companyId = $companyRow['company_id'];

// 查询该公司的员工列表
$stmt = $conn->prepare("SELECT name, position, hire_date FROM employees WHERE company_id = ?");
$stmt->bind_param("i", $companyId);
$stmt->execute();
$result = $stmt->get_result();

// 处理结果生成HTML
$output = '<h3>公司员工列表</h3>';
if ($result->num_rows > 0) {
    $output .= '<ul>';
    while ($row = $result->fetch_assoc()) {
        $output .= '<li>' . htmlspecialchars($row['name']) . ' - ' . htmlspecialchars($row['position']) . ' (入职日期: ' . htmlspecialchars($row['hire_date']) . ')</li>';
    }
    $output .= '</ul>';
} else {
    $output .= '<p>该公司暂无员工信息</p>';
}

// 输出结果
echo $output;

// 关闭资源
$stmt->close();
$conn->close();
?>

关键注意事项 #

• 全局变量优化：其实你也可以不用全局变量，直接在每个$.get请求里传递$(this).val()作为参数，这样能避免全局变量污染，代码会更严谨。
• 安全防护：一定要用预处理语句防止SQL注入，同时用htmlspecialchars()转义输出内容，避免XSS攻击。
• 请求顺序：两个$.get是并行发起的，哪个先返回就先更新对应的div；如果需要严格的执行顺序，可以把第二个请求放到第一个请求的回调函数里，但并行请求的效率更高。
• 错误处理：示例里加了.fail()方法捕获请求失败的情况，实际项目中可以根据需求优化错误提示样式。

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