$.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

问题是因为您已连接到提交按钮的click事件。 这意味着在您的 AJAX 请求发生时提交form ，因此页面会立即卸载并取消 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>