$.getJSON 请求在按钮单击时不起作用答案

【问题标题】：$.getJSON request does not work on button click$.getJSON 请求在按钮单击时不起作用
【发布时间】：2017-10-13 22:01:03
【问题描述】：

我试图找到解决这个问题的方法，我目前不知所措。我正在尝试使用 twitch API 收集有关流的信息。

当我传入一个用户名数组时，我能够让 .getJSON 请求工作，如果用户离线或无效，则返回 null。

$(document).ready(function() {
  var streamers = ["ESL_SC2","OgamingSC2","cretetion","freecodecamp","storbeck","habathcx","RobotCaleb","noobs2ninjas","meteos","c9sneaky","JoshOG"];
  var url = "https://api.twitch.tv/kraken/streams/";
  var cb = "?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm&callback=?";

  getInitialStreams(streamers, url, cb); //load hard-coded streams
});

function getInitialStreams(streamers, url, cb) {
  //loop through the streamers array to add the initial streams
  for (var i = 0; i < streamers.length; i++) {
    (function(i) {
      $.getJSON(url + streamers[i] + cb, function(data) {
        //If data is returned, the streamer is online
        if (data.stream != null) {
          console.log("online");
        } else {
          console.log("offline");
        }
      });
    })(i);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-inline">
      <input id="addStreamerForm" class="form-control" type="text" placeholder="Add a Streamer">
      <button id="addStreamerBtn" class="btn" type="submit">Add</button>
</form>

但是，当我尝试通过单击函数调用 API（最终通过表单提取任何输入）时，.getJSON 失败。如下所示。

$(document).ready(function() {
  var url = "https://api.twitch.tv/kraken/streams/";
  var cb = "?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm&callback=?";

  $("#addStreamerBtn").click(function(e) {
    addStreamer("Ben", url, cb);
  });
});

function addStreamer(streamer, url, cb) {
  console.log("I'm inside the function");
  $.getJSON(url + streamer + cb, function(data) {
    console.log("WE DID IT");
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-inline">
  <input id="addStreamerForm" class="form-control" type="text" placeholder="Add a Streamer">
  <button id="addStreamerBtn" class="btn" type="submit">Add</button>
</form>

我不明白为什么该代码不适用于第二个 sn-p。任何指导将不胜感激。

【问题讨论】：

标签： javascript jquery html json api

【解决方案1】：

问题是因为您已经挂钩到提交按钮的click 事件。这意味着 form 在您的 AJAX 请求发生时被提交，因此页面会立即卸载并取消 AJAX。

要解决此问题，请挂钩到 form 的 submit 事件，并在该事件上调用 preventDefault()。试试这个：

$(document).ready(function() {
  var url = "https://api.twitch.tv/kraken/streams/";
  var cb = "?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm&callback=?";

  $(".form-inline").submit(function(e) {
    e.preventDefault();
    addStreamer("Ben", url, cb);
  });
});

function addStreamer(streamer, url, cb) {
  console.log("I'm inside the function");
  $.getJSON(url + streamer + cb, function(data) {
    console.log("WE DID IT");
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-inline">
  <input id="addStreamerForm" class="form-control" type="text" placeholder="Add a Streamer">
  <button id="addStreamerBtn" class="btn" type="submit">Add</button>
</form>

【讨论】：