PHP含空格元素数组传递至JS函数时出现语法错误求助

问题原因 #

你的代码报错是因为json_encode($value)生成的JSON字符串中可能包含换行符、双引号等特殊字符，直接拼接到onclick的单引号属性里时，会破坏HTML属性的语法结构，导致JavaScript解析时出现字符串字面量未转义换行的错误。比如JSON里的换行被HTML解析为实际换行，打断了JS的字符串；或者特殊字符和属性引号冲突。

方案一：转义JSON字符串并规范HTML属性引号 #

修改PHP代码，用htmlspecialchars转义JSON字符串，同时将onclick属性用双引号包裹，避免字符串冲突：

$db = Db::getInstance();
$sql = "select * from users ";
$record = $db->query($sql);
$i = 1;
foreach ($record as $key => $value) {
    // 转义JSON中的特殊字符，ENT_QUOTES同时转义单双引号
    $jsonData = htmlspecialchars(json_encode($value), ENT_QUOTES);
    // onclick用双引号包裹，参数用单引号
    echo "<tr><td><a onclick=\"editRecord('$jsonData')\" data-toggle='modal' data-target='#userModal' href='#'><i class='icon-pencil'></i></a></td></tr>";
}

JS函数保持不变即可：

function editRecord(n) {
    let p = JSON.parse(n);
    console.log(p['U_name']);
}

方案二：使用data属性存储数据（更推荐） #

这种方式避免直接在onclick中拼接字符串，更安全易维护，也不需要复杂的转义：

PHP代码

$db = Db::getInstance();
$sql = "select * from users ";
$record = $db->query($sql);
$i = 1;
foreach ($record as $key => $value) {
    $jsonData = htmlspecialchars(json_encode($value));
    // 将JSON数据存在data-user属性中
    echo "<tr><td><a class='edit-link' data-user='{$jsonData}' data-toggle='modal' data-target='#userModal' href='#'><i class='icon-pencil'></i></a></td></tr>";
}

JavaScript代码

// 页面加载完成后绑定点击事件
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.edit-link').forEach(link => {
        link.addEventListener('click', function() {
            // 从data属性获取并解析JSON
            let p = JSON.parse(this.dataset.user);
            console.log(p['U_name']);
        });
    });
});

说明 #

• htmlspecialchars会将HTML特殊字符（如双引号、换行、小于号等）转义为实体，避免破坏HTML结构和JS语法。
• 方案二遵循了行为与结构分离的原则，代码更清晰，也能避免因字符串拼接带来的潜在安全问题（比如XSS风险）。

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