Javascript 该报价未出现在网页上

我试图做的是当按钮被点击时，报价出现在网页上，但它不起作用。我正在使用api

$（“.btn”）。在（“单击”，函数（）{
$.ajaxSetup（{cache:false}）
$.getJSON（“http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&callback=“，函数（数据）{
$（“.quote”）.html（数据[0]。内容+“-”+数据[0]。标题）；
});
});

随机报价生成器
单击按钮以获取随机报价
新报价
啁啾
将
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);
  });
});

检查这个

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

请求正在工作，但浏览器正在阻止它，因为它是跨源请求。要么让服务器管理员启用cors，要么检查是否支持JSONP请求
 它在我的机器里工作你是按什么顺序写代码的？首先是jQuery，然后是HTML（如这里所示）还是其他方式？