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

【问题标题】：How to use $.ajax to receive JSON from API如何使用 $.ajax 从 API 接收 JSON
【发布时间】：2017-12-08 22:24:06
【问题描述】：

我正在尝试制作一个随机报价机，所以我开始使用这个 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);
    }
  })
});

但是由于某种原因，当我单击按钮时，什么也没有发生，我不明白问题出在哪里。我完全愿意接受其他方法。

【问题讨论】：

没有任何反应，因为请求返回一个空对象：jsfiddle.net/1chjtL6h
这是您使用的实际网址吗？如果是这样，它看起来不正确。
How can I debug my JavaScript code?的可能重复
@Liam 哎哟。我觉得这种方式太搞笑了。 ??????
@RoryMcCrossan 如果在 JSF 中将 URL 更改为 https 而不是 http jsfiddle.net/94h6sx74 我的意思是，它实际上可以工作

标签： javascript jquery json ajax api

【解决方案1】：

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

我认为您的代码不起作用的原因是您没有为您的 jQuery 文件分配“文档就绪”语法（如果这是您的 JS 文件的完整代码）。正如您的代码所见，here.

这可以通过

的简写语法来实现

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

或者

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

【讨论】：

【解决方案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/

【讨论】：