如何使用Fetch API实现PHP后端向前端返回并展示HTML？

原本通过jQuery AJAX实现了PHP后端向前端传递HTML代码的功能，现在改用Fetch API实现相同功能，数据可以成功发送到后端，但无法获取后端返回的HTML内容并展示。

PHP后端代码 #

if (isset($_POST)) {
  echo '<b>DataToSend</b>';
  // 其他HTML内容
}
return;

原前端Fetch代码 #

fetch('', {
  method: 'POST',
  body: data,
}).then(function(data){
  document.body.innerHTML = data;
});

问题原因 #

Fetch API第一个then回调接收的参数是Response对象，并非直接的HTML文本内容，不能直接赋值给innerHTML。需要通过Response对象的text()方法，将响应内容提取为可直接使用的HTML字符串。

修复后的前端代码 #

fetch('', {
  method: 'POST',
  body: data,
})
.then(function(response) {
  // 将响应转换为文本格式的HTML内容
  return response.text();
})
.then(function(htmlContent) {
  // 将HTML内容插入到页面中
  document.body.innerHTML = htmlContent;
})
.catch(function(error) {
  // 捕获请求过程中的错误（可选）
  console.error('请求失败:', error);
});

额外说明 #

如果data是自定义键值对对象（而非FormData），需要手动设置请求头的Content-Type，确保后端能正确解析POST数据：

fetch('', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: new URLSearchParams(data).toString(), // 比如data是{key: 'value'}格式的对象
})
// 后续处理同上...

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