如何在 Javascript 中解析 JSONp 响应

Posted 2023-05-08

【中文标题】如何在 Javascript 中解析 JSONp 响应

【英文标题】：How do I parse JSONp response in Javascript

【发布时间】：2018-11-18 05:52:24

【问题描述】：

我是 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);）。我不确定这是否正确。

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

【问题讨论】：

你的html页面是什么？好像里面没有“title”

@IStepashka Na... 不是 HTML 页面，它是 res 对象。你不明白发生了什么。

杰西，如果我的回答对你有用，请点击勾选按钮接受。

【参考方案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;

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

【讨论】：

很抱歉，我没有提到我的代码从外部源获取 JSONp，所以我在本地没有调用函数。我已经编辑了我的问题。道歉！

@Jesse 你能解释一下这里的全部代码吗？

我的 fetch 函数几乎从这里 (services.runescape.com/m=website-data/…) 获取 API，它返回问题中描述的 JSONp 响应。然后我希望解析我对 HTML id 的响应。提取工作正如我的控制台告诉我的那样，innerhtml 代码也可以工作，但是我不确定如何正确实现我的响应以从响应中传递“标题”值。非常感谢！

@Jesse 如果你能展示整个代码，我可以尝试解决它并帮助你。

我已经上传到这里了：pastebin.com/wZJSmF8u。再次感谢您的帮助！