如何将JavaScript变量传入PHP的trsText翻译函数

要处理前端JavaScript变量item.description和element.name的翻译，得先明确：PHP是后端运行代码，JS是前端运行代码，两者没法直接在运行时互相调用，得通过后端预渲染或者前端AJAX请求两种方式来实现，下面给你详细拆解：

方案一：后端预生成翻译后的内容（推荐，性能更优） #

如果你的JavaScript代码是嵌入在PHP模板文件（比如.php）里的，且item、element的数据原本就来自后端，可以直接在PHP层先把需要翻译的内容处理好，再传递给JS变量。

举个完整的示例：

<?php
// 假设这是你从数据库或其他地方获取的原始数据
$item = [
    'description' => 'Original product description'
];
$elements = [
    ['id' => 1, 'name' => 'Premium Add-on', 'price' => 15, 'priceFormated' => '$15.00']
];

// 先调用trsText翻译所有需要的字段
$translatedItem = [
    'description' => trsText($item['description'])
];
$translatedElements = array_map(function($element) {
    $element['name'] = trsText($element['name']);
    return $element;
}, $elements);
?>

<script>
// 把翻译好的PHP数据转成JS可直接使用的变量
const item = <?php echo json_encode($translatedItem); ?>;
const elements = <?php echo json_encode($translatedElements); ?>;

// 现在直接使用翻译后的内容渲染
$('#modalDescription').html(item.description); 

elements.forEach(element => {
    const id = /* 这里填入你的id变量值 */;
    $('#exrtas-area-inside').append(`<div class="custom-control custom-checkbox mb-3"> 
        <input onclick="recalculatePrice(${id});" class="custom-control-input" id="${element.id}" name="extra" value="${element.price}" type="checkbox">
        <label class="custom-control-label" for="${element.id}">${element.name}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+${element.priceFormated} </label>
    </div>`);
});
</script>

这种方式不需要额外的HTTP请求，性能更好，还能避免异步加载带来的渲染延迟问题。

方案二：通过AJAX请求后端翻译接口（适合动态加载内容） #

如果item和element是前端动态获取的（比如从前端API、本地存储或者用户交互生成），没法在后端预翻译，那可以写一个PHP接口专门处理翻译请求，前端通过AJAX调用这个接口获取翻译后的文本。

1. 编写PHP翻译接口（比如translate.php） #

<?php
// 仅处理POST请求
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    echo '';
    exit;
}

$text = $_POST['text'] ?? '';
// 调用翻译函数并返回结果
echo !empty($text) ? trsText($text) : '';
exit;
?>

2. 前端用AJAX调用接口翻译 #

// 封装一个异步翻译函数
async function translateText(text) {
    if (!text.trim()) return text;
    try {
        const response = await fetch('translate.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `text=${encodeURIComponent(text)}`
        });
        return await response.text();
    } catch (error) {
        console.error('翻译请求失败:', error);
        return text; // 请求失败时返回原文本，避免页面异常
    }
}

// 渲染内容时调用翻译
async function renderDynamicContent() {
    // 假设item和element是你前端已有的动态变量
    const translatedDesc = await translateText(item.description);
    $('#modalDescription').html(translatedDesc);

    const translatedName = await translateText(element.name);
    const id = /* 你的id变量值 */;
    $('#exrtas-area-inside').append(`<div class="custom-control custom-checkbox mb-3"> 
        <input onclick="recalculatePrice(${id});" class="custom-control-input" id="${element.id}" name="extra" value="${element.price}" type="checkbox">
        <label class="custom-control-label" for="${element.id}">${translatedName}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+${element.priceFormated} </label>
    </div>`);
}

// 触发渲染
renderDynamicContent();

如果需要批量翻译多个element的name，建议把所有需要翻译的文本一次性传给接口，减少HTTP请求次数，优化性能。

额外安全提示 #

不管用哪种方案，都要注意XSS防护：如果item.description或element.name包含用户输入的内容，建议在PHP里用htmlspecialchars()处理后再输出，或者在JS里用DOM方法（比如document.createElement）创建元素，而不是直接拼接HTML字符串。

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