带有 AJAX 的随机报价机答案

【问题标题】：random quote machine with AJAX带有 AJAX 的随机报价机
【发布时间】：2018-05-22 13:54:58
【问题描述】：

我想在 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=：“Access-Control-Allow-Origin”标头的值“http://null”不等于提供的来源。因此不允许访问 Origin 'null'。

我运行一个简单的本地网络服务器 (python)。

我在 Firefox 和 Chromium 这两种不同的浏览器中进行了尝试。

【问题讨论】：

标签： jquery python ajax

【解决方案1】：

要克服 python 中的允许跨域问题，您可以使用 CORS 包。参考Flask-CORS。

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

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

但是这个 url 也会抛出类似 insecure XMLHttpRequest endpoint 的错误，因为 url 是 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>");
    }
});

【讨论】：

【解决方案2】：

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 即可。

【讨论】：