操作 API AJAX JSON 响应并将其传递到另一个页面的最佳方法是什么？

Question

我想我对你们来说很难。或者至少这对我来说很难。我一直在 Stack Overflow 中寻找最好的方法，每个提出问题的人都得到了不同的回应。

我有这段代码正在访问 API 并调用车队中所有车辆的维护列表。

function getMaintenanceList() {
  var settings = {
    "url": "API URL HERE",
    "method": "GET",
    "timeout": 0,
    "headers": {
    "Authorization": "Bearer token here"
  },
  };

  $.ajax(settings).done(function (response) {
    // The response the API sends is a JSON object.
// It is an array.

var jsonMaintenance = response;
    var parsedJson = JSON.stringify(jsonMaintenance);

//Left over code from when I was trying to
//pass the data directly into the other page
// I was unable to do so
//return jsonMaintenance;

//Left over code from when this was in a PHP file
//and I was posting the stringified response to the page
// for testing purpose
//I had to disable CORS in Google Chrome to test the response out
//console.log(jsonMaintenance);
//document.getElementById("main").innerHTML = parsedJson;

});

};

上面的代码运行良好。我在这里尝试做的是将字符串化的响应写入文件。将该文件保存在服务器中。使用 JavaScript 从另一个页面调用它并将其保存为 JavaScript 中的对象，使用 JSON.parse() 对其进行解析，然后提取所需的信息。

这里解释了我为什么要这样做。当我从 API 调用维护列表时，我会从 API 获取整个维护列表，但我需要能够仅显示列表中的部分信息。

在一页上，我们将它命名为vehicle-list.php，在上面我有我们车队中所有车辆的列表。他们都有分配给他们的单位编号。当我单击此页面上的单元号时，它将带我到另一个页面，其中包含有关车辆的更多信息，例如 VIN 号、车牌等。我们将此页面称为 vehicle-info.php。我们使用这个页面来获取所有车辆的信息，换句话说，当我们点击vehicle-list.php 上的不同单元号时，它总是会将我们带到vehicle-info.php。我们只在进入页面时更新 DOM。

我只想在页面中包含特定于每个车辆单元的信息以及 DOM 中的其他信息。而且我只想从 API 调用一次信息，因为我仅限于对该 API 的一定数量的调用。这就是我尝试这样做的原因。

我会说，我最初想要做的是每 24 小时通过使用 vehicle-list.php 中的函数将响应保存为变量，如上所示 var jsonMaintenance = response;，然后只访问某些部分每次单击单元号时，数组的值。但是，我无法访问任何其他页面中的变量。我编写了许多测试文件，试图调用jsonMaintenance，但没有成功，所以我一直试图将它作为文本文件保存到服务器，但我也无法弄清楚。

在解释了以上所有内容之后。我的问题是：

我如何最好地操纵这些数据来完成我想要完成的事情？最好的标准是什么？上面的代码甚至是为我正在尝试做的事情调用数据的正确方法吗？

当我在 Stack Overflow 上搜索时，似乎没有一个完成任何这些的标准。我希望尽可能高效。

感谢您的宝贵时间。

Answer 1

在通过 api 调用获取数据后，您可以通过多种方式通过网站传递数据，最好的方法是将这些信息存储在数据库中，然后以您想要的任何方式调用它，您可以就您使用 php 而言，您可以将其存储到 sql 或访问，如果您不想将这些信息存储在 sql 或 access 等数据库中，那么最好的方法是将其存储到 localStorage 并调用随时返回。 我将简要地向您展示如何做到这一点，如果您想获得更好的解释，请发布您返回数据的示例。

在本地存储中存储项目，

localStorage.setItem('key', 'value');

从本地存储中调用一个项目，

var somevar = localStorage.getItem('key')

从本地存储中删除特定项目，

localStorage.removeItem('key')

清除所有保存到本地存储使用的项目，

localStorage.clear()

请注意将数据存储到 localStorage 仅在您使用的站点上

Answer 2

我会以某种方式这样做。

1. 使用您选择的服务器端语言从 API 调用维护列表，在您的情况下似乎是 PHP。假设脚本被称为：get-list.php。这可以由运行 get-list.php 的 cron 作业触发，间隔限制为您可以为该 API 执行的一定数量的调用。或者，如果您无法创建 cron 作业，则使用 AJAX-call 触发相同的 get-list.php（例如 jQuery.get('sld.tld/get-list.php') - 在这种情况下，get-list.php 必须确定是否是调用 API 的正确时间或不是）。

2. 现在您有了数据，您可以根据需要准备数据，并将其作为JSON-string 存储在您选择的文本文件或数据库中。如果我猜对了，您对每辆车都有一个特定的数据集，该数据集必须由一个 id 标识（您将其命名为“单元号”），因此您的 JSON 看起来有点像：{"unit1": { property1: "val1", property2: "val2" }, "unit2": { property1: "valXYZ", property2: "valABC" }} 或类似名称。

3. 现在，当您从 vehicle-list.php 链接到 vehicle-info.php 时，您可以这样做：<a href="sld.tld/vehicle-info.php?id=unit1">ancor</a> 或类似的。当然，您也可以使用AJAX 获取数据，只需提供vehicle-info.php 相应的单元号（或id - 更好地说）就可以了。

4. vehicle-info.php 现在拥有渲染页面的所有内容，即存储在文本文件或数据库中的完整数据集以及知道要提取整个数据集的哪个部分的 id（单元号）。

我想为您提供这种不同的方法，因为根据我的经验，这应该会更好。如果您在服务器端工作（例如PHP），则您具有写入权限，而JavaScript-client 端则不然。而且性能也不是什么大问题。例如，如果您对get-list.php 级别的数据集进行大量操作，这不是问题。它可以运行几分钟，一旦完成，它就会存储即用型数据，使其静态可用，而不会对性能产生任何进一步影响。

希望对你有帮助！

Answer 3

如果我遇到类似的问题，我只会将数据存储在我自己的数据库中并从那里调用它，考虑到您只是（愿意/abe/允许）很少从 API 请求数据但需要频繁地对数据进行操作（每当有人点击您应用程序上的特定车辆时），这似乎是最好的行动方案。

因此，我不是在客户端查询数据，而是从服务器调用它，将其存储在服务器上，然后让客户端对该数据进行操作。