javascript - 如何使用$.ajax从API接收JSON

Question

我正在尝试制作一个随机报价机，因此我开始使用此 HTML 来定义元素:

<div id="quoteDisplay">
  <h1 id="quote">Quote</h1>
  <h2 id="author">- Author</h2>
  <button id="new">New Quote</button>
</div>

$('#new').on('click', function(e) {
  e.preventDefault();
  $.ajax({
    url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
    success: function(data) {
      var post = data.shift();
      $('#author').html(post.title);
      $('#quote').html(post.content);
    }
  })
});

但是由于某种原因，当我单击按钮时，没有任何反应，我不明白问题出在哪里。我完全愿意接受其他方法来做到这一点。

Answer 1

请求在 jsFiddles 上未返回的原因是输入的 url 导致“混合内容”错误。 (即，在“HTTPS”页面上请求“HTTP”源。)

我认为您的代码无法正常工作的原因是您尚未将“文档就绪”语法分配给您的 jQuery 文件(如果这是您的 JS 文件的完整代码)。正如您的代码的工作原理所示 here .

这可以通过

的简写语法来实现

$(function() {
//YOUR CODE HERE
}

或者

$(document).ready(function(){
});