使用服务器端代码从客户端提供的不可靠的API获取JSON输出，并以适当的格式在页面上呈现数据

Using server side code take the JSON output from an unreliable API supplied by a client, and render the data on a page in an appropriate format

本文关键字：格式 数据 输出 客户端 代码 服务器端 JSON 获取 API 不可靠      更新时间：2023-09-26

所以我遇到这种情况，有人能建议如何处理吗？

使用服务器端代码从不可靠的API获取JSON输出由客户端提供，并以适当的方式在页面上呈现数据总体安排

给定的API URL返回时间序列数据，该数据表示一组网站在30年内在谷歌排名中的表现天。

客户端的API URL为：

https://tools.ayima.com/techtest/api/marketintel

但是，客户端不希望API端点在公共互联网。API也很慢并且非常不可靠，因此您不能只需直接使用JavaScript获取API数据。您需要使用某种服务器端代码，以便首先获取页面的API数据。API速度非常慢，有时只会与503一起失败HTTP状态和一个空正文，所以您的代码应该实现一些缓存或数据库的类型以及重试失败请求的逻辑。对于此测试返回的实际数据永远不会更改，但出于以下目的对于缓存无效，您可以假设数据通常会更改每24小时。

您可以使用相同的后端输出页面/前端代码脚本，直接将API的输出包含在源代码中，或者打印/代理JSON，并在单独的前端使用AJAX获取数据结束代码-任何你觉得最舒服的事情。

我试图用php获取数据，所以原始的API是隐藏的，并在使用angularjs获取后。

这将是我的php来获取数据

<!DOCTYPE html>
<html>
<body>
<?php
$homepage = file_get_contents('https://tools.ayima.com/techtest/api/marketintel');
echo htmlentities($homepage)
?>
</body>
</html>

这将是angularjs部分

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl"> 
<ul>
  <li ng-repeat="x in ayima">
    <p>{{ x.domain }}</p>
  </li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("http://94.136.40.103/~boyisbadnews.com/test/marketintel.php")
  .success(function (response) {$scope.ayima = response.marketIntel;})
  .error(function(data, status, headers, config) {
      // something went wrong
    });
});
</script>
</body>
</html>

但无法使其发挥作用。

获取服务器数据的php文件（marketinel.php）必须是：

PHP文件：

<?php
    header("Content-Type: application/json");
    header("Cache-Control: no-cache");
    $homepage = file_get_contents('https://tools.ayima.com/techtest/api/marketintel');
    echo $homepage;
?>

HTML文件：我看到您的标记中有一些错误。这里有一个合适的html。

<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
  <meta charset="utf-8" />
  <title>Page title</title>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
  <div data-ng-controller="customersCtrl">
    <ul>
      <li data-ng-repeat="x in ayima">
        <p>{{ x.domain }}</p>
      </li>
    </ul>
  </div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
      $http.get("http://dfjb.webcindario.com/dataAyima.php").success(function(response) {
          $scope.ayima = response.marketIntel;
        })
        .error(function(data, status, headers, config) {
          // something went wrong
        });
    });
  </script>
</body>
</html>

相关文章：