刷新浏览器展示JSON数据时JS代码覆盖HTML问题的解决方法

嘿，这问题我熟！你现在遇到两个小问题：一是document.write()的经典坑，二是jQuery代码里的语法错误，咱们一步步把它修好～

首先说核心问题：document.write()在页面加载完成后调用，会直接清空整个HTML文档！这就是为什么你刷新后，原来的<h1>json Example</h1>啥的都没了，只剩JSON返回的标题。这玩意儿只适合在页面刚加载的时候往文档里写内容，加载完再用就会搞砸整个页面结构。

然后你的jQuery代码还有个小语法错误——回调函数的写法错了，应该是function(data)而不是function, data，不然根本接收不到返回的JSON数据。

修正后的完整代码 #

HTML（保持你原来的结构就行） #

<div class="container"> 
  <div id="json_example"> 
    <h1>json Example</h1> 
  </div> 
</div>

JavaScript（修复语法+替换掉坑人的document.write） #

$.getJSON('https://jsonplaceholder.typicode.com/posts/1', function(data) {
  // 精准找到你要插入内容的容器
  const targetContainer = document.getElementById('json_example');
  
  // 两种更新方式选一个：
  // 1. 在原有内容后面追加JSON标题（比如加个段落）
  targetContainer.innerHTML += `<p>JSON标题：${data.title}</p>`;
  
  // 2. 直接替换容器里的h1内容（如果想换掉原来的标题）
  // targetContainer.querySelector('h1').textContent = data.title;
});

为啥这么改就对了？ #

• 抛弃document.write：改用DOM精准操作，只修改你指定的<div id="json_example">区域，不会动页面其他部分。
• 语法修正：把错误的function, data改成function(data)，这样才能正确接收JSON接口返回的数据。
• 灵活可控：你可以选择追加内容或者替换原有内容，完全按照你的需求来。

要是你不想用jQuery，用原生JavaScript的fetch API也能实现，写法给你参考下：

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => res.json())
  .then(data => {
    const targetContainer = document.getElementById('json_example');
    targetContainer.innerHTML += `<p>JSON标题：${data.title}</p>`;
  });

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