Question

我想在AJAX的帮助下创建一个随机引用机器。我在这里找到了这个API https://quotesondesign.com/api-v4-0/

我使用这个示例代码（来自上面的页面）

    $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
  $("body").append(a[0].content + "<p>— " + a[0].title + "</p>")
});

但是我成了以下错误消息

无法加载http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=：＆＃39; Access-Control-Allow-Origin＆＃39;标头的值为＆＃39; http://null＆＃39;这不等于提供的原产地。起源＆＃39; null＆＃39;因此不允许访问。

我运行一个简单的本地Web服务器（python）。

我在两个不同的浏览器中尝试过它，Firefox和Chromium。

Answer 1

Access-Control-Allow-Origin可能很棘手。我得到了和你一样的错误，所以我重新编写了它并让它工作：

VanillaJS方法：

var data = null;
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
  if (this.readyState === 4) {
    console.log(JSON.parse(this.responseText));
  }
});

xhr.open("GET", "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1");

xhr.send(data);

jQuery AJAX方法：

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1",
  "method": "GET",
  "dataType":'json'
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

如果您想将内容放在与示例相同的位置，只需添加$("body").append(a[0].content + "<p>— " + a[0].title + "</p>"其中console.log即可。

Answer 2

要在python中克服这个允许跨源问题，可以使用 CORS 包。请参阅Flask-CORS。

http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=
您在代码中使用的上述链接将以JSON格式提供响应。您不能以此格式允许跨源。

在您的api文档页面（Quotes on Design）本身，他们提供了不同的网址（http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback）来绕过跨域事物。尝试使用此网址。（再次阅读您的网址文档）

但是这个网址也会抛出像不安全的XMLHttpRequest端点这样的错误，因为网址是 http （不安全）。

如果您的用例只是在页面中显示随机引号。我建议你使用下面的代码。

$.ajax({
        url : 'https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?',
        dataType: 'jsonp',
        success: function (data) { 
            var quote = data.quoteText;
            if(data.quoteAuthor != ""){
              var author = data.quoteAuthor;
            }
            else{
          var author = "Unknown";
        }
        $('body').append("<p>"+ quote + "</p><p>&mdash; " + author + "</p>");

    },
    error: function (data) {
        quote = "A year spent in artificial intelligence is enough to make one believe in God.";
        author = "Alan Perlis";
        $('body').append("<p>"+ quote + "</p><p>&mdash; " + author + "</p>");
    }
});

AJAX随机报价机

2 个答案: