使用innerHTML渲染$.getJSON返回内容时出现异常函数、无法展示JSON的问题

根因说明 #

• $.getJSON 是异步请求方法，调用后直接返回的是 jQuery 的 jqXHR 异步对象，而非你期望的 JSON 数据，直接将该对象传入处理函数自然无法得到正确结果
• 你拿到的 JSON 响应本身就是数组结构，不需要额外调用 Object.values 转换；且数组每一项是包含 gif 属性的对象，直接将对象赋值给 innerHTML 会输出 [object Object] 这类异常内容，需要取出对应的 gif 属性值使用

修复后代码 #

JS 代码（api.js） #

// 利用异步回调处理请求返回的结果
$.getJSON("../data/random/anime/pat/pat.json", function(patData) {
  function randomObject(arr) {
    const content = arr[Math.floor(Math.random() * arr.length)];
    // 如果需要直接展示gif链接，用下面这行
    // document.getElementById("content").innerText = content.gif;
    // 如果需要渲染gif图片，用下面这行
    document.getElementById("content").innerHTML = `<img src="${content.gif}" alt="动图加载失败">`;
  }
  randomObject(patData);
});

HTML 代码无需改动，按你原有代码正常使用即可。

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