js接收php数组_json_encode传递数组到前端【方法】-php教程-PHP中文网

js接收php数组_json_encode传递数组到前端【方法】

蓮花仙者

发布： 2025-12-20 23:53:02

原创

305人浏览过

PHP后端用json_encode输出JSON时，前端需正确解析：一、AJAX/fetch请求并调用response.json()；二、内联script标签中输出转义JSON；三、通过data属性传递并JSON.parse；四、POST交互响应；五、jQuery.ajax自动解析。

js接收php数组_json_encode传递数组到前端【方法】

如果PHP后端使用json_encode将数组转换为JSON字符串并输出，而JavaScript前端需要正确接收并解析该数据，则可能因输出方式、编码格式或解析时机不当导致解析失败或数据为空。以下是实现该功能的多种方法：

一、通过AJAX异步请求获取JSON数据

该方法利用XMLHttpRequest或fetch API向PHP脚本发起HTTP请求，PHP脚本输出json_encode后的纯JSON字符串，前端接收响应体后调用JSON.parse进行解析。

1、在PHP文件（如data.php）中设置正确的Content-Type头，并输出json_encode结果：
header('Content-Type: application/json; charset=utf-8');
echo json_encode($php_array);

2、在JavaScript中使用fetch发送GET请求：
fetch('data.php')
  .then(response => {
    if (!response.ok) throw new Error('Network response was not ok');
    return response.json();
  })
  .then(data => console.log(data));

立即学习“PHP免费学习笔记（深入）”；

3、确保PHP数组不含循环引用或不可序列化对象，否则json_encode返回false，输出空字符串，此时前端将收到SyntaxError。

二、内联输出至HTML页面的script标签中

该方法适用于页面首次加载时即需使用PHP数组的场景，将json_encode结果直接嵌入HTML的<script>标签内，避免额外请求，由<a style="color:#f60; text-decoration:underline;" title= "浏览器"href="https://www.php.cn/zt/16180.html" target="_blank">浏览器JS引擎直接解析为JavaScript对象。</script>

1、在PHP模板中（如index.php），在<script>标签内输出转义后的JSON：<br><script><br>const jsArray = <?php echo json_encode($php_array, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP); ?>;<br></script>

2、确认PHP输出未被HTML特殊字符（如、&）破坏结构，必须使用JSON_HEX_TAG和JSON_HEX_AMP等标志防止XSS及语法错误。

3、在后续JavaScript代码中可直接使用jsArray变量，无需解析，该变量已是原生JavaScript数组或对象。

三、通过DOM元素的data属性传递JSON字符串

该方法将json_encode结果作为自定义data属性值写入HTML元素，再由JavaScript读取并解析，适合轻量、非敏感数据且需与特定DOM节点绑定的场景。

1、在PHP中输出带data-json属性的HTML元素：

pollinations

属于你的个性化媒体引擎

247

查看详情

2、在JavaScript中获取并解析：
const container = document.getElementById('data-container');
const jsonString = container.dataset.json;
const jsArray = JSON.parse(jsonString);

3、使用htmlspecialchars对JSON字符串进行HTML实体转义，防止引号冲突导致HTML结构断裂或解析失败。

四、通过Ajax POST提交并接收JSON响应

该方法适用于需携带参数向PHP发送请求并获取数组响应的交互场景，PHP端接收请求后生成数组并以JSON格式返回。

1、JavaScript中构造POST请求：
fetch('process.php', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: 'action=get_list'
})

2、PHP端process.php接收并响应：
if ($_POST['action'] === 'get_list') {
  header('Content-Type: application/json; charset=utf-8');
  $data = ['item1', 'item2', 'item3'];
  echo json_encode($data);
  exit;
}

3、前端Promise链中必须调用response.json()，若误用response.text()则需手动JSON.parse，且易忽略空响应或错误状态。