Question

我正在进行一项练习，使用API来建立报价生成器来提取引号。我的GET请求似乎工作得很好，但是我在操作作为响应而到达的数组时遇到了麻烦。我正在寻找关于如何仅将引用文本拉到一个div并且只将字符名称（没有＆＃34;引用：＆＃34;和＃34;字符：＆＃34;附加）的想法另一个来自jS。有任何想法吗？我知道我的javaScript非常简单，我只是想看看我能做些什么。

我使用的API位于https://github.com/wsizoo/game-of-thrones-quotes。它将所有内容作为数组返回，我现在只将其记录到控制台，直到我能够解决问题。

＆＃13;

const endPoint = 'https://got-quotes.herokuapp.com/quotes';
const $button = $('#button');
const $quoteDisplay = $('.quoteDisplay');
const $sourceDisplay = $('.sourceDisplay');

function getQuote() {
  $quoteDisplay.empty();
  $sourceDisplay.empty();
  const xhr = new XMLHttpRequest();
  xhr.resposeType = 'json';
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      console.log(xhr.response);
    }
  }
  xhr.open('GET', endPoint);
  xhr.send();
};

$button.click(getQuote);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <title>GOT Quote Generator</title>
  </head>
  <body>
    <h1>Game of Thrones Quote Generator</h1>
    <div class="quoteDisplay">
    </div>
    <div class="sourceDisplay">
    </div>
    <button id="button">Get A New Quote</button>
  </body>
</html>

＆＃13;

Answer 1

首先，您不需要为$quoteDisplay和$sourceDisplay创建常量。此外，您从API获取的数据是JSON格式，因此您需要使用$.parseJSON()函数解析该数据，然后您可以将其用作普通的JavaScript对象。处理完毕后，请使用下面的javascript将数据附加到div -

const endPoint = 'https://got-quotes.herokuapp.com/quotes';
const $button = $('#button');
const $quoteDisplay = $('.quoteDisplay');
const $sourceDisplay = $('.sourceDisplay');

function getQuote() {
  $quoteDisplay.empty();
  $sourceDisplay.empty();
  const xhr = new XMLHttpRequest();
  xhr.resposeType = 'json';
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      var quote = $.parseJSON(xhr.response);
      $('.list-group').append("<div class='list-group-item'>"+quote.quote+"<br/>"+quote.character+"</div>");
    }
  }
  xhr.open('GET', endPoint);
  xhr.send();
};

$button.click(getQuote);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <title>GOT Quote Generator</title>
  </head>
  <body>
    <h1>Game of Thrones Quote Generator</h1>
    <div class="list-group">
    </div>
    <button id="button">Get A New Quote</button>
  </body>
</html>

API响应格式

1 个答案: