javascript - TVMaze API 错误

Question

我正在创建一个列出电视节目的网站，并且我正在使用 TVMaze api。我是使用 JSON 的初学者，所以也许我的问题就是这样，但这里发生了奇怪的事情。

我的表是使用以下代码生成的:

var keyword = "";
var $url = "";

$('#submit').on('click', function (e) {
    //e.preventDefault();
    keyword = $('#search').val();
    window.sessionStorage['keyword'] = keyword;
});
if (!window.sessionStorage['keyword']) {
    $url = " http://api.tvmaze.com/shows?page=1";
} else {
    keyword = window.sessionStorage['keyword'].toString();
    keyword = keyword.toLowerCase().replace(/\s/g, "");
    $url = "http://api.tvmaze.com/search/shows?q=" + keyword;
    //alert($url);
}

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        var $obj = JSON.parse(this.responseText);
        for (var i = 0; i <= $obj.length - 1; i++) {
            var $item = '<div> \
                          <div>\
                              <h2>' + $obj[i].name + '</h2> \
                              <div> ' + $obj[i].rating.average + ' </div>\
                              <p>' + $obj[i].summary + '</p>\
                              <a href="#" id="' + $obj[i].id + '">Track</a>\
                          </div>\
                        </div>';
            $('.show-items-container').append($item);
        }
    }
};
//alert($url);
xmlhttp.open("GET", $url, true);
xmlhttp.send();

因此，它首先检查搜索栏中是否输入了关键字，如果没有，则向/page=1 发送请求，如果输入了关键字，则应打印该节目。但是，就我而言，它按照预期读取 url，但没有显示任何内容。如果我在浏览器中搜索该链接，它会列出正确的节目。

例如，如果我在搜索栏中输入“kirby”，它会读取此网址 -> http://api.tvmaze.com/search/shows?q=kirby ，但表中没有显示任何内容，并且控制台中没有错误。如果您在浏览器中输入相同的网址，它就会起作用。

谁能告诉我问题是什么？

Answer 1

看起来 onclick 您没有发出 xhr 请求。您在 click 事件之外调用 xmlhttp.open 和 xmlhttp.send，因此单击时不会发生任何事情。我还注意到您访问了错误的属性，它应该是 $obj[i].show.___ vs $obj[i].___

var keyword = "";
var $url = "";
var xmlhttp = new XMLHttpRequest();

function makeRequest() {
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // clear the current search results
      $('.show-items-container').empty();
      var $obj = JSON.parse(this.responseText);
      for (var i = 0; i <= $obj.length - 1; i++) {
        // make sure you access the correct property
        var $item = `<div>
                        <div>
                          <h2> ${$obj[i].show.name} </h2>
                          <div> ${$obj[i].show.rating.average} </div>
                          <p> ${$obj[i].show.summary} </p>
                          <a href="#" id="${$obj[i].show.id}">Track</a>
                        </div>
                      </div>`;
        $('.show-items-container').append($item);
      }
    }
  }

  // make the xhr request on click
  xmlhttp.open("GET", $url, true);
  xmlhttp.send();

}

$('#submit').on('click', function(e) {
  keyword = $('#search').val();
  $url = "https://api.tvmaze.com/search/shows?q=" + keyword;

  // call on click
  makeRequest();
});

// call on page load
makeRequest();

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


<input id='search' />

<button type="button" id='submit'>Submit </button>

<div class="show-items-container">
</div>