时间戳

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

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

问题描述

我想我对你们来说很难。或者至少这对我来说很难。我一直在 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 上搜索时，似乎没有完成任何这些的既定标准。我想尽可能高效。

感谢您的时间。

标签： javascriptphpjqueryjsonajax

解决方案

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

将项目存储在本地存储中，

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

从本地存储中调用项目，

var somevar = localStorage.getItem('key')

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

localStorage.removeItem('key')

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

localStorage.clear()

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

推荐阅读