Question

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
</head>

<script>

function newQuote() {
  $.ajax({
      type: "GET",
      url: "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1",
      success: function(data) {
        //console.log('success', data);
        quote = JSON.parse(data);
        $('#content').html(quote[0].content);
        $('#author').html(quote[0].title);
      }
    });
}

$(document).ready(function() {
  var quote; 
  newQuote();
  $('#getQuote').click(function(event) {
    newQuote();
  });
});

</script>

<body>
  <div class="container-fluid">
    <div class="row text-center">
      <h1>Random Quote Machine</h1>
    </div>

    <div class="row text-center">
      <div class="well" id="content">
        The quote will go here
      </div>

      <div id="author">The author will go here </div>
        <div class="row text-center">
          <button id="getQuote" class="btn btn-primary">Get Quote </button>
        </div>
      </div>
</body>

我正在尝试使用AJAX来创建一个随机引用机器来从API请求，但是当我单击标有的按钮获取引用时，没有任何反应。我的AJAX请求有什么问题？我的语法错了吗？

编辑：我实施了建议的更改，但仍然无效。以下是我的控制台上的错误消息：

Uncaught SyntaxError：位置1的JSON中出现意外的令牌o           在JSON.parse（）
          在Object.success（VM333 pen.js：7）
          在j（jquery.min.js：2）
          at Object.fireWith [as resolveWith]（jquery.min.js：2）
          在x（jquery.min.js：4）
          在XMLHttpRequest。（jquery.min.js：4）

Answer 1

TL; DR：

不要在成功回调中调用JSON.parse()（因为它希望将字符串作为第一个参数）。 data 参数已经是JSON对象。

success: function(data) {
    quote = data;
    $('#content').html(quote[0].content);
    //..rest of success handler code 
}

错误消息：

查看浏览器控制台，可以看到以下错误消息：

未捕获的SyntaxError：位置1的JSON中的意外标记o

这是一个线索，它试图将（JSON）对象解析为字符串。

如果您要检查typeof数据，它应该告诉您它是对象。

console.log('success - typeof data: ', typeof data);

原因：

如果您查看获取报价的请求的响应标题（请参阅下面的粘贴），您会注意到 Content-Type 标题是＆＃34; < EM>应用/ JSON;字符集= UTF-8 ＆＃34 ;.来自$.ajax()的jQuery文档：

如果指定了json，则在作为对象传递给成功处理程序之前，使用jQuery.parseJSON解析响应。 ¹

标题输出：

回复标题：
  访问控制允许的凭据：真
  访问控制允许方法：POST，GET，OPTIONS，PUT，DELETE
  访问控制允许来源：http://run.plnkr.co
  内容长度：300
  内容类型：应用/ JSON;字符集= UTF-8   ...

修正：

不要在成功回调中调用JSON.parse()（因为它希望将字符串作为第一个参数）。 data 参数已经是JSON对象。

function newQuote() {
  $.ajax({
      type: "GET",
      url: "//quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1",
      success: function(data) {
        quote = data;
        $('#content').html(quote[0].content);
        $('#author').html(quote[0].title);
      }
    });
}

在this plunker中看到它。

¹ http://api.jquery.com/jquery.ajax

Answer 2

function newQuote() {
  $.ajax({
      type: "GET",
      url: "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1",
      success: function(data) {
        //console.log('success', data);
        quote = JSON.parse(data);
        $('#content').html(quote[0].content); // selecting first child of array is the point
        $('#author').html(quote[0].title);
      }
    });
}

当你通过Jquery附加它时，

也会从onclick中删除对newQuote的重复调用。

Answer 3

我认为你应该从按钮html标签中删除onclick事件属性。

我的AJAX请求有什么问题？

3 个答案:

TL; DR：

错误消息：

原因：

修正：