Question

我正在尝试根据FreeCodeCamp挑战构建一个随机引用生成器，但我想首先编写一个测试来确认我实际上正在获取我正在请求的json对象。我有一个简单的h1元素，其id设置为'quote'，以下代码（jQuery在CodePen中加载）

function genQuote () {
  var output = $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(data){
    var theQuote = data.content;
    var Author = data.title;

    document.getElementById('quote').innerHTML = theQuote;
  });
}

有问题的网址，在访问时，向我显示看起来像json对象的内容，但我的功能根本不会改变#quote项目。

Answer 1

从网址中移除&callback=，以请求JSON，而不是将$.getJSON()来电转换为jsonp请求。此外，返回一个数组，而不是普通对象;使用括号表示法访问对象

function genQuote () {
  var output = $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(data){

    var theQuote = data[0].content;
    var Author = data[0].title;

    document.getElementById('quote').innerHTML = theQuote;
  })
}

$(genQuote);

jsfiddle https://jsfiddle.net/gpyx6jLy/

Answer 2

正如您对问题的评论所说，这是一个跨源请求共享（CORS）问题。 API返回“http://null”作为Access-Control-Allow-Origin标头，不允许您访问。

看起来这是他们的API服务器中的一个错误，你可能无法使用它。

检查对json请求的响应内容？

2 个答案: