javascript - 单击加载不同的 api 内容(JS)

标签 javascript jquery arrays json api

<分区>

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

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

例子:

我可以使用过滤器调用 API。我选择了一个 type = 1 的请求和另一个 type = 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?

提前致谢!

最佳答案

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

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

对于客户端: 1. 调用 Api 并获取整个数据并将其存储在全局 javascript 变量中(您也可以将其存储在本地存储中,这样它在页面刷新后不会被删除)。 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> ```



关于javascript - 单击加载不同的 api 内容(JS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57673016/

相关文章:

java - 如何创建一个类的实例,并将字符串数组作为唯一的实例变量?

javascript - 在不提交表单的情况下使用 ngClick 触发自动完成

c# - ASP.net 链接按钮 PostBackUrl 不适用于 IIS 8

javascript - 如何编写 jQuery 风格的 ng-repeat

javascript - 获取上一个/下一个 |使用 list.js 的第一个/最后一个按钮

java - 在java中比较并从2个数组中提取相似的字符串,不比较双字

javascript - 通过 AJAX 加载子菜单项的 HTML/javascript 上下文菜单

javascript - FireFox 中的客户端高度

php - 如何将 SELECT ALL 值或 SELECTED 复选框值插入到 mysql 中的不同列中?

arrays - PowerShell将字符串拆分为二维数组