使用 ajax 从网站中提取引用和作者答案

【问题标题】：Pulling quotes and authors from websites with ajax使用 ajax 从网站中提取引用和作者
【发布时间】：2018-10-18 02:59:08
【问题描述】：

我对 javascript 还很陌生，目前正在尝试在 freecodecamp 上完成 Random Quote Machine 项目。这个想法是在用户单击“新报价”按钮后显示报价及其作者。我的问题是，每当单击它时，它都会以乱码的形式显示引用，我不确定如何正确地提取引用及其作者。如果有人能引导我走上正确的道路，那将不胜感激！

https://codepen.io/leafbow/pen/RyjaeV

$(document).ready(function() {
    $("#changeColor").on("click", function()  {
      getQuote();
    });
});

function getQuote() {
  var options = {
    url: 'https://quotesondesign.com/wp-json/posts? filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=getQuote'
  };

  var request = $.ajax(options); 

  request.done(function(responseFromServer) {
    console.log(responseFromServer);
    document.getElementById("quote").innerHTML = responseFromServer;
  });

  request.fail(function(responseFromServer, status, error) {
    console.log(responseFromServer);
    console.log(status);
    console.log(error);
  });
}

【问题讨论】：

标签： javascript ajax

【解决方案1】：

这不是胡言乱语。服务器以 JSON 格式返回数据，您需要对其进行解析以使其适合您。

试试下面的代码：

request.done(function(responseFromServer) {
  var quote = responseFromServer[0];
  document.getElementById("quote").innerHTML = quote.title;
});

此外，您需要更改请求 URL。我通过参考the docs获得了这个信息。

从中删除_jsop 参数并添加一个空的callback 参数。所以 URL 基本上变成了这样：

https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=

请参阅此working demo 了解更多信息。

【讨论】：