我的 AJAX 请求有什么问题？答案

【问题标题】：What's wrong with my AJAX request?我的 AJAX 请求有什么问题？
【发布时间】：2017-02-10 06:05:20
【问题描述】：

<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 请求，但是当我单击标有 get quote 的按钮时，什么也没有发生。我的 AJAX 请求有什么问题？是不是语法错了？

编辑：我实施了建议的更改，但它仍然不起作用。这是我控制台上的错误消息：

未捕获的 SyntaxError：位置 1 处 JSON 中的意外标记 o
在 JSON.parse()
在 Object.success (VM333 pen.js:7)
在 j (jquery.min.js:2)
在 Object.fireWith [as resolveWith] (jquery.min.js:2)
在 x (jquery.min.js:4)
在 XMLHttpRequest。 (jquery.min.js:4)

【问题讨论】：

检查控制台。并确保您的API(url) 是正确的。
您的 API 返回一个带有值数组的 JSON。尝试使用quote[0].content
你为什么在 HTML 和 Javascript 中多次调用 newQuote？
JSON+Node.js - Unexpected token o的可能重复

标签： javascript jquery html ajax

【解决方案1】：

tl;博士：

不要在成功回调中调用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 标头是“application /json; charset=UTF-8"。来自$.ajax() 的 jQuery 文档：

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

标题输出：

响应标头：
访问控制允许凭据：true
访问控制允许方法：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

【讨论】：

【解决方案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 的重复调用。

【讨论】：

【解决方案3】：

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

【讨论】：