Html 将GET方法返回的数据存储到变量中

发布于10月10日

下面的代码从URL(可在调试控制台中读取)获取文本，但我无法将该数据作为变量访问，然后可以在其他地方使用.

该代码目前会产生"数据不可迭代"错误，我try 了JSON.parse(解析)数据，但没有取得多少成功.

例如，如果我想要将获取的数据打印到页面正文上，我该如何着手呢？

$(document).ready(function() {
  $("#ajaxButton").click(function() {
    $.get("https://v2.jokeapi.dev/joke/Programming?type=single", function(data, status) {
      console.log(data);

      var addStr = "";
      for (var x of data) {
        addStr += "<p>" + x.Any + "</p>";
      }

      $("#here").html(addStr);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="here"></div>
<p id="joke">Want to hear a joke?</p>
<br>
<button id="ajaxButton">yes</button>

推荐答案

问题在于反序列化的响应不是数组，而是对象.这就是为什么不能在for循环中迭代它的原因.

要执行所需的操作，只需在对UI的响应中输出joke属性的内容:

jQuery($ => {
  const $here = $('#here');

  $("#ajaxButton").on('click', function() {
    $.get("https://v2.jokeapi.dev/joke/Programming?type=single", response => {
      $here.html(`<p>${response.joke}</p>`);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<p id="joke">Want to hear a joke?</p>
<div id="here"></div>
<button id="ajaxButton">yes</button>