如何在 Javascript 中解析 JSONp 响应

Question

我是 Javascript 的新手，我正在尝试从另一个网站的外部 API 中获取数据，对其进行解析并在我的 HTML 页面中显示它的块。目前，一切正常，除了我试图从 JSONp 响应中获取信息以更新 HTML 显示。

我正在使用的 JavaScript 代码：

//Fetch method grabs information from "myURL"
fetch("https://exampleURL.com", {
    mode: 'cors'
  })
  .then(function(response) {
    if (response.ok) //Checking if response is returned correctly
    {
      var res = response; //Storing response in a variable
      jQuery000000000000000_0000000000(res); //Sending response parsing function
    }
  });


//Parsing function reads the 'title' data from the JSONp response
function jQuery000000000000000_0000000000(res) {
  document.getElementById('title').innerHTML = res[0].title; //Error occurs here
}

我应该从外部 API 获得 JSONp 响应：

jQuery000000000000000_0000000000([{"isSuffix":false,"name":"name","title":"Mr"}]);

每当我运行此代码时，我都会在控制台中收到“Uncaught (in promise) TypeError: Cannot read property 'title' of undefined”错误，引用上面代码中的 innerHTML 行。

任何指针将不胜感激！ :)

[编辑] 根据我从其他在线答案中读到的内容，我认为创建一个与响应中的函数同名的函数是合适的（jQuery000000000000000_0000000000(res);）。我不确定这是否正确。

响应来自外部网站。谢谢！

Answer 1

在这种情况下，它是一个 JSONP 请求。您只需要在需要时调用<script> 文件即可。

<script src="/path/to/jsonp.js"></script>

脚本是可执行的。所以你不需要使用 AJAX 或任何方式来调用它。看看，你是如何发送你的res 的？你做错了。这是因为您在响应中已经有正确的调用：

jQuery000000000000000_0000000000([{"isSuffix":false,"name":"name","title":"Mr"}]);

上面的代码只需要执行即可。不要使用fetch()。

你的完整代码应该是：

<script>
  //Parsing function reads the 'title' data from the JSONp response
  function jQuery000000000000000_0000000000(res) {
    document.getElementById('title').innerHTML = res[0].title; //Error occurs here
  }
</script>
<script src="/path/to/jsonp.js"></script>

执行上述内部脚本的另一种方法是使用：

//Parsing function reads the 'title' data from the JSONp response
function jQuery000000000000000_0000000000(res) {
  document.getElementById('title').innerHTML = res[0].title; //Error occurs here
}
$.getScript("/path/to/jsonp.js");

上面文件中的内容会自动调用jQuery000000000000000_0000000000(res)函数，参数有效。 :)

---

详细说明

在您当前的代码中，发生的情况是，您对 JSONP 请求进行了 AJAX 调用，这是您不应该做的，它使您的代码变成了这种方式：

jQuery000000000000000_0000000000("jQuery000000000000000_0000000000([{"isSuffix":false,"name":"name","title":"Mr"}])");

当它试图访问第一个元素的标题属性时，它是一个字符串，在这里，它将是undefined。因为，字符串不会有title属性。

这是堆栈：

jQuery000000000000000_0000000000(jQuery000000000000000_0000000000([{"isSuffix":false,"name":"name","title":"Mr"}]));
res = jQuery000000000000000_0000000000([{"isSuffix":false,"name":"name","title":"Mr"}]);
res[0] = undefined;
res[0].title = TypeError;

这就是你变得不确定的原因...:)