Question

我从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;
  }

?>

因此，我还要执行另一个API调用并循环处理数据2。如何在不重新加载页面的情况下加载数据2而不是数据1？

谢谢！

Answer 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;
  }

?>

Answer 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> ```

点击（JS）加载不同的api内容

2 个答案: