Question

我要做的是当按钮单击报价出现在网页上但不起作用。我正在使用api

$(".btn").on("click",function(){
  $.ajaxSetup({cache:false})
  $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&callback=",function(data){
   $(".quote").html(data[0].content + "-" + data[0].title);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class = "container-fluid">
  <div class = "row"></div>
  <div class = "text-center quote-box">
    <h1 >Random Quote Generator</h1>
    <p class = "quote"> Click the button to get a random quote</p>
  </div>
  
  <div class = col-md-4 id = quote-button>
    <button class="btn btn-primary" type="submit" id = quote-button>New Quote</button>
    <button class="btn btn-primary" type="submit" id = quote-button><i class = "fa fa-twitter">Twitter</i></button>
  </div>
    
  </div>
</div>

Answer 1

将http更改为https。问题可能是由于“混合内容”，http和https，您的浏览器会阻止这些问题。

  $(".btn").on("click",function(){
   $.ajaxSetup({cache:false})
   $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&callback=",function(data){
    $(".quote").html(data[0].content + "-" + data[0].title);
  });
});

选中此plunk

通过安全HTML加载初始HTTPS时，会发生
混合内容 t 连接，但其他资源（如图像，视频，样式表，脚本）通过不安全的HTTP连接加载。这就是所谓的混合内容，因为正在加载HTTP和HTTPS内容显示相同的页面，初始请求在HTTPS上是安全的。现代浏览器会显示有关此类内容的警告向用户表明该页面包含不安全的资源。

Answer 2

请求正在运行，但浏览器阻止它，因为它是一个跨源请求。让服务器管理员必须启用cors或检查是否支持JSONP请求。

报价没有出现在网页上

2 个答案: