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上返回的原因是由于输入的网址导致了“混合内容”这一事实。错误。（即，在＆＃39; HTTPS＆＃39;页面上请求＆＃39; HTTP＆＃39;来源。）

我认为您的代码无法正常工作的原因是，您尚未分配“准备就绪”文件。 jQuery文件的语法（如果这是JS文件的完整代码）。正如您的代码可以看到here。

这可以通过

的简写语法来实现

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

或者

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

Answer 2

您正在使用$.ajax，此方法的其中一个选项是method，未指定。

要了解有关请求方法的更多信息，请查看jQuery文档：http://api.jquery.com/jquery.ajax/

以下代码可以使用。

$.get({
    url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
    success: function(data) {
        /* process response */
    }
})

这里有一个有效的例子：http://jsfiddle.net/1chjtL6h/2/

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

2 个答案: