Flask API+jQuery Ajax调用：JSON响应显示[OBJECT OBJECT]问题排查

你的代码主要存在两个核心问题，导致出现[OBJECT OBJECT]的错误显示：

错误原因拆解 #

1. 异步操作逻辑错误
   $.ajax()是异步请求，它的返回值是jqXHR对象（不是接口响应的数据），你直接把这个对象赋值给joke.innerText，自然会显示[object Object]。另外，done回调是请求成功后才执行的异步代码，试图通过return把回调内的结果传给外部赋值语句是无效的——外部赋值会在请求完成前就执行完毕。

2. 不必要的JSON.stringify使用
   你的API返回的是键值对结构的对象，直接操作对象的键和值就能得到友好的笑话展示，用JSON.stringify转成字符串反而会显示成{"Yo Mama So...": "Yo mama so hairy people think she’s an Ewok."}这种生硬格式，不是用户想要的自然文本。

修正后的代码 #

place_joke = () => {
  var settings = {
    url: "http://localhost:6969/insult",
    method: "GET",
    timeout: 0,
    dataType: 'json' // 显式指定响应类型，确保jQuery自动解析JSON
  };

  const jokeElement = document.getElementById("joke");
  // 发起请求，在回调中处理结果
  $.ajax(settings)
    .done(function (response) {
      // 取出对象中的唯一键值对
      const [jokeTitle, jokeContent] = Object.entries(response)[0];
      jokeElement.innerText = `${jokeTitle} ${jokeContent}`;
    })
    .fail(function() {
      // 增加失败处理，提升用户体验
      jokeElement.innerText = "抱歉，获取笑话失败了";
    });
};

修改说明 #

• 移除直接将$.ajax()返回值赋值给DOM的错误操作，改为在done回调内更新页面内容，确保只有拿到响应数据后才修改DOM。
• 使用Object.entries()将JSON对象转为键值对数组，通过解构取出笑话标题和内容，拼接成自然文本展示。
• 增加dataType: 'json'，让jQuery自动解析响应为JSON对象，无需手动处理。
• 添加fail回调处理请求失败场景，给用户明确反馈。

内容的提问来源于stack exchange，提问作者Terry Brooks Jr