如何用API端點的響應主體替換ap標簽中的文本？

Question

我有以下Javascript代碼：

$(document).ready(function() {
  $('#generator').on('click', function getQuote() {
      $('#quote').text("response body here")
  });
});

目前可以將p標記中的文本替換為“ response body here”，下一步，我想弄清楚如何在“ response body here”所在的位置獲取api端點的響應主體。 我嘗試了幾件事，包括

$(document).ready(function() {
  $('#generator').on('click', function getQuote() {
      $.getJSON("https://...api", function(json) {
        $("#quote").text(JSON.stringify(json));
      });
  });
});

但是無論我做什么，如果我嘗試在原始功能之外添加任何功能，則該按鈕將不再生成任何新文本。 我已經驗證了端點是有效的，即使沒有通過Postman傳遞的標頭，也應該返回一些東西，但是我什么也沒得到。 一旦我可以將響應正文返回到此處，就可以弄清楚如何按照我的需要獲取其余部分，這只是其中的一部分。

Answer 1

Wikiquote在另一個域上，並且幾乎所有站點都啟用了CORS，因此您（本機）無法從瀏覽器向其發出網絡請求。 要從中獲取信息，您必須使用自己的后端，或者中繼其他人的后端：

 $('#generator').on('click', () => { fetch("https://cors-anywhere.herokuapp.com/en.wikiquote.org/w/api.php?action=query&titles=J.%20R.%20R.%20Tolkien&prop=revisions&rvprop=content&format=json&formatversion=2") .then(res => res.json()) .then(responseObj => $("#quote").text(JSON.stringify(responseObj))); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="generator">generator</div> <div id="quote">quote</div>