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/

上一篇：javascript - 如何呈现句子中随机设置的粗体文本

下一篇：javascript - 在 Javascript 的表单序列化上只获取选定的值

相关文章：

javascript - 在页面刷新时保存 html 页面的状态

c++ - Visual Studio C++ 无法将文字字符串参数识别为常量字符串引用

javascript - Jquery 旋钮在浏览器调整大小时更改大小

javascript - 在 AngularJS 应用程序中使用纯 javascript 对象是好的还是坏的做法？

javascript - 是否有反转贝塞尔曲线的选项？ (cytoscape.js)

java - 用于爬网的 headless Java HTTP 客户端？

javascript - 在页面加载时隐藏 Div 控件

jquery - 如何自定义 jquery 自动完成以在 DIV 中显示

javascript - 在javascript中从数组访问对象？

c++ - 理解 argList 构造函数的问题

©2024 IT工具网  联系我们