Question

目前正在开发一个网站，该网站需要从监护人API返回数据，并在我创建的标签中将其显示在我自己的网站上。

我不确定的是如何为每个标签显示正确的信息。例如，我有一个“主页”标签，一个“政治”标签，“体育”标签等。

以下是我的html

的示例

<div class="page-header">
<h1>News Updates</h1>

</div>

<div class="container">
 <h3>Welcome</h3>

 <div class+"row">

 <div class"col-lg-3 col-md-3 col-sm-6 col-xs-12">
  <div class="tab">
  <button class="tablinks" onclick="openEvent(event, 'Home')">Home</button>
  <button class="tablinks" onclick="openEvent(event, 'Politics')">Politics</button>
  <button class="tablinks" onclick="openEvent(event, 'World')">World</button>
  <button class="tablinks" onclick="openEvent(event, 'Technology')">Technology</button>
  <button class="tablinks" onclick="openEvent(event, 'Science')">Science</button>
  <button class="tablinks" onclick="openEvent(event, 'Entertainment')">Entertainment</button>
  <button class="tablinks" onclick="openEvent(event, 'Sport')">Sport</button>
  <button class="tablinks" onclick="openEvent(event, 'Most Popular')">Most Popular</button>
 </div>



 <div id="Home" class="tabcontent">
 <h3>News Home</h3>


 </div>

API链接为：https://content.guardianapis.com/search?api-key=42fe68de-c20c-400e-ba2e-52bf467b10bf

在尝试了几种获取数据的方法之后，我仍然没有在我的网站上显示它。

是否有人能够帮助我如何使用AJAX从JSON文件中获取信息并将其放入我的每个标签中。对api的每个请求都会有所不同，因为它们显然是不同的主题。

从API检索到正确的数据后，如何才能将其显示在正确的标签中？

编辑：添加我尝试从网址获取数据的两种方式

 <script>
 $(function(){

 $("button").click(function(){
    $.getJSON("http://content.guardianapis.com/search?q=politics&api-key=42fe68de-c20c-400e-ba2e-52bf467b10bf", function(result){

        $.each(result, function(i, field) {
            $("#resultJson").append(field.name);
        });
    });
 });
 });       
</script>

和

var homeBtn = document.getElementById("Home");

 homeBtn.addEventListener("click", function(){
    var politicsRequest = new XMLHttpRequest();
politicsRequest.open('GET', 'http://content.guardianapis.com/search?q=politics&api-key=42fe68de-c20c-400e-ba2e-52bf467b10bf');
politicsRequest.onload = function(){
  var politicsData = JSON.parse(politicsRequest.responseText);
console.log(politicsData.responseText);
};
ourRequest.send();
  });

因此，对于政治标签，我希望搜索带有政治的文章，然后将标题和JSON中的另一部分数据显示在分配给该主题的标签部分中

Answer 1

var response = ''; 
var url = 'https://content.guardianapis.com/search?api-key=42fe68de-c20c-400e-ba2e-52bf467b10bf' 
$.ajax({ 
  type: "GET", 
  url: url, 
  dataType: "json",
  success: function(data,status){ 
    response = data;
    console.log(data);   
  }, 
  error: function(data){ 
    alert(data); 
  } 
});

使用JSON和AJAX在API的选项卡中显示数据

1 个答案: