Javascript 单击时加载不同的api内容（JS）_Javascript_Jquery_Arrays_Json_Api

Javascript 单击时加载不同的api内容（JS）

javascript jquery arrays json api

Javascript 单击时加载不同的api内容（JS）,javascript,jquery,arrays,json,api,Javascript,Jquery,Arrays,Json,Api,我从API中获取一些数据。数据是JSON格式的。我用PHP获取数据并用HTML输出现在我想做的是，实现一个过滤机制，从API输出不同的内容例如：我可以使用过滤器调用API。我选择一个类型为1的请求和另一个类型为2的请求。两个调用都返回一个包含预期数据的JSON对象。我用PHP做了一个foreach循环，并从调用1中输出数据。我用数据2做另一个循环。开始时，我希望显示数据1，当我单击链接（例如获取数据2）时，应加载数据2并替换数据1 到目前为止还不错。我对JavaScript或JQuery

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

提前谢谢

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

关注点：

输入需要消毒
$\u GET不是获取输入的最佳方式
href中的URL应格式正确

您有多种方法。您可以在客户端和服务器端执行此操作。
可以在不重新加载页面的情况下更新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> ```





$（文档）.ready（函数（）{
var dataFetched=null；
//获取和存储页面加载时的数据
$.ajax（{url:https://www.linktoapi.com/，成功：函数（结果）{
dataFetched=结果；
}});
$（“#按钮1”）。单击（函数（）{
if（数据获取）{
//过滤数据并显示结果
}
});
$（“#按钮2”）。单击（函数（）{
if（数据获取）{
//过滤数据并显示结果
}
});
});
API 1
API 2
```
是否有方法存储PHP输出并加载所需的输出？
。当然，您可以传递一个包含规范信息的对象，并在将其发送回客户端之前过滤PHP代码中的数据。或者，如果您不想在PHP中这样做，您可以在apireder（）中创建一个实现，通过客户端JS来实现。好的，我想试试客户端方法。我的理解是：我通过PHP调用API，现在我可以将调用的结果存储在JavaScript变量中？您通过JavaScript调用PHP API，并将PHP API的响应发送到您的JavaScript。我已经编辑了我的答案，您可以检查上面的伪代码想法。但是我如何告诉API url哪种方法、身份验证和筛选？就像在我的例子中一样。你可以在ajax请求中传递它…````var myKeyVals={A1984:1，A9873:5，A1674:2，A8724:1，A3574:3，A1165:5}var saveData=$.ajax（{type:'POST'，url:'someaction.do？action=saveData'，数据：myKeyVals，数据类型：“text”，成功：函数（resultData）{alert（“Save Complete”）}）```我也会尝试这种方法。在GetRequiredFilterObjectFor方法中，我只做了一个快速的if语句。如果$\u GET data=1，我使用filter1，如果是2，我使用filter。对吧？那可能有用：-）
 <!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> ```