javascript - 报价未出现在网页上

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

Mixed content occurs when initial HTML is loaded over a secure HTTPS connection, but other resources (such as images, videos, stylesheets, scripts) are loaded over an insecure HTTP connection. This is called mixed content because both HTTP and HTTPS content are being loaded to display the same page, and the initial request was secure over HTTPS. Modern browsers display warnings about this type of content to indicate to the user that this page contains insecure resources.