如何修复JavaScript的[object Object]错误并正确展示JSON占位符数据？

看起来你已经找对了方向，但卡在了jQuery Ajax回调函数的参数使用上——这是个新手常踩的小坑，咱们一步步把它搞定！

问题根源 #

你写的$.get回调函数里，把title和completed作为参数，但jQuery的$.get成功回调的第一个参数是完整的响应JSON对象，后面的参数是请求状态文本和jqXHR实例。所以你现在拿到的title其实是整个todo对象（也就是你看到的[object Object]），而completed是类似"success"的状态字符串，完全不是你想要的内容。

修正后的完整代码示例 #

先把回调参数改对，再把数据直观展示到页面上（而不只是用alert）：

HTML（新增结果展示容器）

<button type="button" class="btn btn-dark">Click here to execute your first Ajax get request</button>
<!-- 新增容器用来展示请求结果 -->
<div id="result-container" class="mt-3"></div>

JavaScript

$(document).ready(function(){
  $("button").click(function(){
    // 发起GET请求
    $.get("https://jsonplaceholder.typicode.com/todos/1", function(todo) {
      // 用console.log调试，查看完整的响应对象（浏览器控制台查看）
      console.log("拿到的完整数据：", todo);
      
      // 把需要的属性存入变量
      const todoTitle = todo.title;
      const isCompleted = todo.completed;
      
      // 方式1：用alert展示修正后的内容
      alert(`Title: ${todoTitle}\nCompleted: ${isCompleted}`);
      
      // 方式2：把内容渲染到页面上，更直观
      const resultHtml = `
        <p><strong>Title:</strong> ${todoTitle}</p>
        <p><strong>Completed:</strong> ${isCompleted ? "✅ 已完成" : "❌ 未完成"}</p>
      `;
      $("#result-container").html(resultHtml);
    });
  });
});

关键知识点梳理 #

• 回调参数正确用法：$.get(url, function(responseData, statusText, jqXHR) { ... })，第一个参数才是你要的JSON数据对象。
• 访问对象属性：通过.语法（比如todo.title）或者方括号语法（todo['title']），就能从对象里取出具体值。
• 调试技巧：console.log(responseData)是调试神器，在浏览器控制台里能看到完整的响应结构，帮你明确有哪些属性可以用。
• 页面展示优化：别只依赖alert，通过修改DOM元素的内容，能让数据更友好地呈现在页面上。

修改后你就能看到预期的Title: delectus aut autem和Completed: false（注意JSON里的completed是布尔值，不是"success"哦）。

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