点击时加载不同的api内容（JS）[关闭]答案

【问题标题】：Load different api content on click (JS) [closed]点击时加载不同的api内容（JS）[关闭]
【发布时间】：2019-12-31 12:53:09
【问题描述】：

我从 API 中获取了一些数据。数据采用 JSON 格式。我用 PHP 获取数据并以 HTML 格式输出。

现在我想做的是，实现一个过滤机制来从 API 输出不同的内容。

例子：

我可以使用过滤器调用 API。我选择一个类型 = 1 的请求和另一个类型 = 2 的请求。这两个调用都返回一个带有预期数据的 JSON 对象。我在 PHP 中执行了一个 foreach 循环并从调用 1 中取出数据。我对数据 2 执行另一个循环。一开始我想显示数据 1，当我单击链接（例如获取数据 2）时，数据 2 应该加载和替换数据 1.

到目前为止一切顺利。我对 JavaScript 或 JQuery 没有太多经验。什么是正确的方法？从 API 调用中获取数据并直接使用 JS？有没有办法存储 PHP 输出并只加载所需的输出？

我没有太多代码要展示，因为这更像是建立一个基地。我喜欢了解如何解决这些问题并自己找到解决方案（仍在学习）。也许有人可以解释解决问题的步骤。

<?php
  // Making an API call with POST as the method.
  // The $filter1 variable holds a JSON Object with search terms for
  // data 1
  $results = new APIReader('POST', 'https://www.linktoapi.com/', $filter1, 'username:password');
?>
<!-- Links to filter the data output -->
<nav>
  <a href="#data1">get data 1</a>
  <a href="#data2">get data 2</a>
</nav>

<?php
  // Loop through data 1
  foreach ($results as $result) {
    echo $result->ID;
  }

?>

所以我为数据 2 执行了另一个 API 调用和循环。如何在无需重新加载页面的情况下加载数据 2 而不是数据 1？

提前致谢！

【问题讨论】：

Is there a way to store the PHP output and just load the output that is needed?。当然，您可以传递一个带有规格信息的对象，并在您的 PHP 代码中过滤数据，然后再将其发送回客户端。或者，如果您不想在 PHP 中执行此操作，您可以在 APIReader() 中创建一个实现，以通过客户端 JS 执行此操作。

标签： javascript jquery arrays json api

【解决方案1】：

这（最重要的是，快速而肮脏的代码）不是解决它的最佳方法，尽管我希望它可能会帮助您朝着正确的方向迈出一步

兴趣点：

输入需要清理
$_GET 不是获取输入的最佳方式
href 中的网址格式应该正确

<?php

  $filter = GetRequiredFilterObjectFor($_GET['dataId']); // This function you'll have to create

  // Making an API call with POST as the method.
  // The $filter variable holds a JSON Object with search terms for
  // data <dataId querystring parameter>
  $results = new APIReader('POST', 'https://www.linktoapi.com/', $filter, 'username:password');
?>
<!-- Links to filter the data output -->
<nav>
  <a href="?dataId=1">get data 1</a>
  <a href="?dataId=2">get data 2</a>
</nav>

<?php
  // Loop through data
  foreach ($results as $result) {
    echo $result->ID;
  }

?>

【讨论】：

我也会尝试这种方法。在 GetRequiredFilterObjectFor 方法中，我只做一个快速的 if 语句。如果 $_GET data = 1，我使用 filter1，如果是 2，我使用 filter。对吗？
这可能行得通:-)

【解决方案2】：

您有多种方法可以做。您可以在客户端和服务器端执行此操作。可以在不重新加载页面的情况下更新 UI，使用的技术是“AJAX”。

现在取决于你是想在客户端还是服务器端进行。

对于客户端： 1. 调用 Api 并获取整个数据并将其存储为全局 javascript 变量（您也可以将其存储在 localstorage 中，以便在页面刷新后不会将其删除）。 2. 现在您可以遍历数据并在需要时过滤数据。

对于服务器端： 1. 根据需要在服务器上使用不同的查询创建 2 个 Api。 2. 现在通过 Ajax 调用这些 Api，您的页面将永远不会重新加载，但页面会刷新。

您应该使用 Jquery 来轻松实现。

 <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   var dataFetched = null;

  //fetching and storing the data on page load

  $.ajax({url: "https://www.linktoapi.com/", success: function(result){
      dataFetched = result;
    }});


  $("#button1").click(function(){
       if(dataFetched){
           //filter the data and show the result
       }
  });

  $("#button2").click(function(){
      if(dataFetched){
           //filter the data and show the result
       }
  });

});
</script>
</head>
<body>

<button id="button1">API 1</button>

<button id="button2">API 2</button>

</body>
</html> ```

【讨论】：

好的，我想试试客户端的方法。据我了解：我通过 PHP 调用 API，现在我可以将该调用的结果存储在 JavaScript 变量中？
您通过javascript调用php api并将php api的响应发送到您的javascript。
我已经编辑了我的答案，你可以检查上面的虚拟代码想法。
但是我如何告诉 api url 哪个方法、身份验证和过滤器？就像我的例子一样。
您可以在 ajax 请求中传递... saveData = $.ajax({ type: 'POST', url: "someaction.do?action=saveData", data: myKeyVals, dataType: "text", success: function(resultData) { alert("Save Complete") } });```