javascript - $.getJSON 请求在单击按钮时不起作用

Question

我试图找到解决这个问题的方法，但我目前不知所措。我正在尝试使用 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>

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

Answer 1

问题是因为您已 Hook 到提交按钮的 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>