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

标签 javascript jquery arrays json api

<分区>

关闭。这个问题需要更多focused .它目前不接受答案。

想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post .

关闭 3 年前。

Improve this question

我从 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 的表单序列化上只获取选定的值

相关文章：

c - 从 .txt 文件中读取数字并将它们存储在 C 中的数组中

javascript - Google 跟踪代码管理器多次加载 Analytics.js

javascript - Webpack 库间依赖如 requireJS.config.shim 中

javascript - 如何通过javascript在列表项中创建子菜单项作为ul？

javascript - 使用 JS 在 DOM 中添加元素

c - 如何以更好的方式编写这些字符数组？

javascript - Eclipse 中的 JSDoc 自动完成文档不适用于 Class.create()

javascript - 如何获取任何 Android 手机的 MAC 地址？

javascript - Velocity.js 显示 : 'block' doesn't work when combined with left: '-50px'

java - 创建访问单个特定类型的通用数组