Angular JSONP 调用 WordPress JSON REST API

Posted 2023-03-03

【中文标题】Angular JSONP 调用 WordPress JSON REST API

【英文标题】：Angular JSONP calling WordPress JSON REST API

【发布时间】：2014-12-23 06:22:48

【问题描述】：

我不完全确定发生了什么，因为我仍在尝试计算跨域 javascript 调用，但我正在从 WordPress 站点调用一些 JSON（使用 WordPress JSON REST API 插件）。由于它来自本地站点（我正在使用 Ionic/Angular 开发移动应用程序），因此我遇到了一些跨域访问问题。所以，我正在考虑使用 JSONP。

我已经成功调用并返回了信息，但我似乎无法对返回的数据做任何事情。

我的电话是这样的：

$http.jsonp('http://heavymetalhamilton.ca/wp-json/hmh-api/shows?_jsonp&callback=JSON_CALLBACK')
  .success(function(data) 
    console.log(data);
  );

但是，没有记录任何内容。我可以看到 $http.jsonp 调用正在返回数据（我可以在开发人员工具中看到，看起来像这样：

/**/(["ID":30,"post_date":"2014-09-25 18:33:15","post_date_gmt":"2014-09-25 
...
)

我看到返回的数据有一些包装，但我不确定如何处理这些数据。

有什么帮助吗？

编辑：在CodePen 中了解正在发生的事情

【问题讨论】：

如果没有记录，那么请求一定是失败的。试试$http.jsonp('…').error(function (data, status, headers, config) … … )

它确实遇到了错误...并显示状态为 404。很奇怪，因为开发工具显示请求返回的状态为 200 以及数据。

还有其他显示吗？比如错误信息或者抛出的异常？使用 JSONP 请求时，状态码不可靠。

没有例外 - 只是未定义的数据。

所以，我有这样的工作，但我不太确定为什么。我不确定如何让回调函数发生在控制器内部，以便我可以继续使用可用的范围...codepen.io/anon/pen/rvFHL

【参考方案1】：

所以，我遇到的最大问题（有几个）是我的 jsonp 调用。它没有附加“成功”的承诺。 Jsonp 触发定义为回调的函数 - 在本例中，调用：

http://heavymetalhamilton.ca/wp-json/hmh-api/shows?_jsonp=mytest&callback=JSON_CALLBACK

一旦返回就调用 mytest() 的全局函数。所以，为了在我的控制器中获得一个全局函数，以便我可以使用 $scope，我的最终结果是：

$http.jsonp('http://heavymetalhamilton.ca/wp-json/hmh-api/shows?_jsonp=mytest&callback=JSON_CALLBACK');

window.mytest = function(data) 
  $scope.shows = data;
;

我返回的内容类型也有问题（如 @Miszy 所述）。我必须指定 Content-Type 设置为 application/javascript... 之前它返回的是 application/json。

就我而言，我正在编写一些自定义功能来返回特定内容，因此我添加了以下内容：

if ($_GET['_jsonp']) 
   $response->header( 'Content-Type', 'application/javascript; charset=' . get_option( 'blog_charset' ), true );

希望这对未来的人有所帮助！

【参考方案2】：

数据作为 JSON 对象返回。请尝试使用以下格式登录

JSON.stringify(data);

否则你可以通过以下方式遍历返回的数据集

console.log(data.ID + ', ' + data.post_date);

等等……

【讨论】：

JSON.stringify 究竟是如何提供帮助的？ console.log 适用于字符串或对象 - 问题是它永远不会被调用。

成功没有被调用，这是问题。