如何将JavaScript定义的变量传入PHP MySQL查询的execute方法参数数组

你目前的写法是行不通的，核心原因是PHP是服务端语言，在页面发送到客户端之前就已经执行完成；而JavaScript是客户端语言，在用户的浏览器中才会执行。二者的运行时机完全错开，PHP运行时JavaScript的变量还不存在，自然没办法直接读取JS变量的值传入PHP方法。

方案：通过AJAX异步请求传递参数 #

分两步实现即可：

步骤1：新建服务端PHP查询接口（示例文件名：get_article.php） #

这个文件独立处理数据库查询逻辑，接收前端传的参数，返回JSON格式的查询结果。

<?php
// 数据库连接逻辑，和你原来的$db_link配置保持一致
$db_link = new mysqli('数据库地址', '用户名', '密码', '数据库名');
if ($db_link->connect_error) {
    die(json_encode(['code' => 1, 'msg' => '数据库连接失败']));
}

// 接收前端传的参数
$article = isset($_POST['article']) ? trim($_POST['article']) : '';
$manufacturer = isset($_POST['manufacturer']) ? trim($_POST['manufacturer']) : '';
if (empty($article) || empty($manufacturer)) {
    die(json_encode(['code' => 2, 'msg' => '参数不完整']));
}

// 执行预查询，和你原来的逻辑一致
$new_article_query = $db_link->prepare('SELECT * FROM `shop_prices_data` WHERE `article` = ? AND `manufacturer` = ?;');
$new_article_query->bind_param('ss', $article, $manufacturer);
$new_article_query->execute();
$new_article = $new_article_query->get_result()->fetch_assoc();

if (!$new_article) {
    die(json_encode(['code' => 3, 'msg' => '未查询到对应数据']));
}

// 返回查询结果
echo json_encode([
    'code' => 0,
    'data' => $new_article
]);
?>

步骤2：修改前端JS代码，删除内嵌的PHP逻辑，改为发送AJAX请求 #

因为你原来的逻辑是要拼接HTML返回，所以可以把原来的同步逻辑改成异步的，示例用fetch实现：

// 你原来的JS函数，注意改成异步函数
async function yourOriginalFunction(manufacturer, article, article_show, name, exist, time_to_exe, info, price, cart_html, color, supply_info_json, start_wrap_div, end_wrap_div) {
    // 发送AJAX请求获取查询结果
    let reg_invoice_value = '';
    try {
        const res = await fetch('get_article.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            // 把JS里的两个变量传到服务端
            body: `article=${encodeURIComponent(article)}&manufacturer=${encodeURIComponent(manufacturer)}`
        });
        const result = await res.json();
        if (result.code === 0) {
            // 拿到查询到的字段值，根据你实际需要的字段调整即可
            reg_invoice_value = result.data.reg_invoice_value ?? '';
        }
    } catch (e) {
        console.error('查询失败', e);
    }

    // 原来的拼接HTML逻辑，这里可以直接使用上面拿到的reg_invoice_value
    return start_wrap_div + '<td class="td_manufacturer">'+ manufacturer + show_hide_button +'</td><td class="td_article">'+ article_show +'</td><td class="td_name">'+ name +'</td><td class="td_exist">'+ exist +'</td><td class="td_time_to_exe"><span onclick="openInfoWindow(null, null, 1, \''+ supply_info_json +'\');">'+ time_to_exe +'</span></td><td class="td_info">'+ info +'</td><td class="td_price">'+ price +'</td><td class="td_add_to_cart">'+ cart_html +'</td>'+ '<td class="td_color" style="background:'+color+'"></td>' + end_wrap_div;
}

注意事项 #

• 接口需要加权限校验逻辑，避免未授权的用户批量爬取商品数据
• 接收参数后可以增加格式校验，避免传入非法参数查询
• 插入DOM的内容建议做XSS转义，防止恶意脚本注入

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