报价未出现在网页上

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);
  });
});

勾选此普拉克

当通过安全的HTTPS连接加载初始HTML ，但通过不安全的HTTP连接加载其他资源（例如图像，视频，样式表，脚本）时，就会发生混合内容 。 之所以称为混合内容，是因为同时加载了HTTP和HTTPS内容以显示同一页面，并且初始请求通过HTTPS是安全的。 现代浏览器会显示有关此类内容的警告，以向用户指示此页面包含不安全的资源。

Answer 2

该请求有效，但浏览器阻止了它，因为它是跨源请求。 让服务器管理员必须启用cors或检查是否支持JSONP请求。