点击时不显示API

我想在点击时从API接收数据。我创建了一个jQuery函数,它是这样的,当我点击一个按钮时,什么都没有发生,检查器也没有显示任何错误。有什么地方是我在js代码中遗漏的吗?HTML

<button id="cryptobtn" onclick="">Crypto</button>

  $("#cryptobtn").on("click",function(e){
    e.preventDefault();

    let url = "https://newsapi.org/v2/everything?q=bitcoin&from=2020-04-01&to=2020-04-20&apiKey=KEYHERE";
    $.ajax({
      url:url, 
      method: "GET", 
      dataType: "Json",

      beforeSend: function(){
        $(".progress").show();
      },

      complete: function(){
        $(".progress").hide();
      },

      success: function(news){
        let output = "";
        let latestNews = news.articles;
        for(var i in latestNews) {
          output +=`
            <div class="col">
              <div class="card-content">
              <h5><a href="${latestNews[i].url}">${latestNews[i].title}</a></h5>
              </div>
              </div>
              <div class="published">
              <h6>${latestNews[i].publishedAt}</h6>
              </div>
              <div class"card-reveal">
              <p>${latestNews[i].description}</p>
            </div>
          `;
        }
        if(output !== ""){
          $("#newsResults").html(output);
        }

      },

      error: function(){
        $("#newsResults").html("Some error occured");
      }
    })
  });
}); ```

解决方案:

添加apikey(从网站生成)后,添加ready函数(等待dom加载)。

你的代码工作良好,见下面的片段

ps (不要使用下面的键,它只是用于片段)

生出新钥匙 此处

$(function() {
  $("#cryptobtn").on("click", function(e) {
    e.preventDefault();
    let url = "https://newsapi.org/v2/everything?q=bitcoin&from=2020-04-01&to=2020-04-20&apiKey=6f2fb6cc764449db9c12a604ad2aac35";
    $.ajax({
      url: url,
      method: "GET",
      dataType: "Json",

      beforeSend: function() {
        $(".progress").show();
      },

      complete: function() {
        $(".progress").hide();
      },

      success: function(news) {
        console.log("success");
        let output = "";
        let latestNews = news.articles;
        for (var i in latestNews) {
          output += `
            <div class="col">
              <div class="card-content">
              <h5><a href="${latestNews[i].url}">${latestNews[i].title}</a></h5>
              </div>
              </div>
              <div class="published">
              <h6>${latestNews[i].publishedAt}</h6>
              </div>
              <div class"card-reveal">
              <p>${latestNews[i].description}</p>
            </div>
          `;
        }
        if (output !== "") {
          $("#newsResults").html(output);
        }

      },

      error: function(e) {
        console.log(e);
        $("#newsResults").html("Some error occured");
      }
    })
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="cryptobtn" onclick="">Crypto</button>
<div id="newsResults"></div>

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何获得通用应用程序的合并代码覆盖率?

2022-9-9 0:33:21

未分类

为什么这个C#方法不能产生正确的截图?

2022-9-9 0:33:23

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索