PHP页面中通过onblur事件向JS传递JSON编码变量的问题

方法1：转义JSON字符串适配HTML属性 #

JSON中的双引号会和onblur属性的双引号冲突，导致HTML语法错误。用PHP的htmlspecialchars函数转义JSON里的特殊字符，就能安全嵌入到HTML属性中：

PHP代码修改 #

$mysqli_equations = collect_all_formulas();
$equations = array();
while($row = $mysqli_equations->fetch_assoc()) {
    $equations[] = $row;
}

$js_array = json_encode($equations);
// 转义JSON字符串，适配HTML属性的双引号
$escaped_js_array = htmlspecialchars($js_array, ENT_QUOTES);

输出input标签 #

echo '<input type="text" id="known_variable" name="known_variable"
onblur="build_known_vars(this.value, \'' . $escaped_js_array . '\')"
onfocus="remove_vars()" />';

JS函数处理 #

传递的是转义后的字符串，需要用JSON.parse解析成JS对象：

function build_known_vars(value, equationsStr) {
    const equations = JSON.parse(equationsStr);
    // 编写生成输入字段的逻辑
}

方法2：使用全局JS变量（更简洁） #

直接把JSON输出为全局JS变量，避免在HTML属性里传递大段字符串：

输出全局变量 #

<script>
// 直接将JSON转为JS数组
const equations = <?php echo $js_array; ?>;
</script>

修改input标签 #

echo '<input type="text" id="known_variable" name="known_variable"
onblur="build_known_vars(this.value)"
onfocus="remove_vars()" />';

JS函数处理 #

直接调用全局变量equations：

function build_known_vars(value) {
    // 直接使用equations数组
    // 编写生成输入字段的逻辑
}

方法3：使用HTML data属性（更符合语义） #

把JSON数据存在input的data-*属性里，避免全局变量污染：

输出input标签 #

echo '<input type="text" id="known_variable" name="known_variable"
data-equations="' . htmlspecialchars($js_array, ENT_QUOTES) . '"
onblur="build_known_vars(this)"
onfocus="remove_vars()" />';

JS函数处理 #

读取data属性并解析：

function build_known_vars(inputElement) {
    const value = inputElement.value;
    const equations = JSON.parse(inputElement.dataset.equations);
    // 编写生成输入字段的逻辑
}

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