Question

我对javascript很新，我目前正在尝试在freecodecamp上完成Random Quote Machine项目。一旦用户点击＆＃34;新报价＆＃34;该想法是显示报价和作者的作者。按钮。我的问题是，无论何时点击它，它都会以乱码形式显示引用，而且我不确定如何正确地将引用与其作者一起提取。如果有人能指导我走正确的道路，那将非常感激！

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);
  });
}

Answer 1

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

请尝试以下代码：

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

此外，您需要更改请求网址。我参考the docs获得了这些信息。

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

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

有关详细信息，请参阅此working demo。

使用ajax

1 个答案: