AJAX偶尔不工作
我想制作一个Chrome扩展，它提取Youtube视频的ID，但是面临一个问题。对于第一次执行，AJAX调用给我一个错误，但对于所有后续调用，工作得很好。每次我打开扩展时都会发生这种情况。我对这个场景很陌生，因此请原谅我的任何新秀错误。我的代码： -AJAX偶尔不工作
function getIDs(data){
var items = [];
for(i in data.items){
items.push(data.items[i].id.videoId.toString());
}
for(i in items){
$('<p>'+items[i]+'</p><br>').appendTo('#results');
}
}
function getVideo(searchQuery){
searchQuery = searchQuery.replace(/ /g,'+');
var queryURL = 'https://www.googleapis.com/youtube/v3/search?q='+searchQuery+'&key=AIzaSyDq5SqWuQIEfIx7ZlQyKcQycF24D8mW798&part=snippet&maxResults=3&type=video';
$.ajax({
url: queryURL,
dataType: 'json',
success: function(data) {
getIDs(data);
},
error: function(ts){
alert(ts.responseText);
}
});
}
document.addEventListener('DOMContentLoaded',function(){
var button = document.getElementById('search');
var div = document.getElementById('results');
button.addEventListener('click',function(){
var input = document.getElementById('input');
var result = input.value;
getVideo(result);
});
});
我不能为我的生活找出什么是错的。我在这里先向您的帮助表示感谢。
编辑
我忘了提，但它给了我一个未定义的错误。对不起！
你的问题似乎是你检索的数据在第一次执行时没有加载，因为AJAX调用是异步。因此，当您拨打getIDs(data)时，data可能尚未加载（这就是为什么它正在处理后续呼叫）。
解决此问题的一种方法是使用承诺。而不是使用success，你可以做这样的事情：
var ids;
$.ajax({
url: queryURL,
dataType: 'json',
success: function(data) {
ids = data;
},
error: function(ts){
alert(ts.responseText);
}
}).then(function(){
getIDs(ids); //calls this function *after* the data is retrieved
});
This post在计算器上做了解释它的一个好工作。
我不同意。 'data'将会在'success'方法中准备就绪。您链接的答案中的问题稍有不同。 – libcthorne
无论如何..试了这个，它不工作。 “承诺”不是“成功”的替代方案吗？ –
@cthorne你认为这个问题是什么？我同意我可能是错的 - 虽然我以前经历过这个问题，并且解决了这个问题。 – socialpiranha
我试过你的Chrome扩展并设法复制这种行为。
的问题是在下面的代码：
<form action="#">
<input type="text" id="input"><br><br>
<center><button id="search">Click Here!!</button></center>
</form>
在点击搜索按钮，窗体被提交，并重新加载页面。页面重新加载，以便您的AJAX请求被取消。这是什么给你readyState 0 error。你可以告诉这种情况的一种方法是注意到当你按下按钮时文本输入中的文本消失。
要停止重装，你可以在JavaScript中使用e.preventDefault()类似上面的页面提示，但我觉得这里最合适的解决方案是add type="button" to your button：
<button id="search" type="button">Click Here!!</button>
你可能会奇怪，为什么这只是发生在第一次请求。这可以归结为how action="#" is handled，答案基本上不是您可以依赖的任何标准方式。事实上，你可以测试here，看到Firefox根本没有重新加载页面，而Chrome却只是第一次。
它给你什么错误？ – neilsimp1
'ts.responseText'给我未定义 –
尝试添加'console.log（ts）;'而不是检查控制台是否有错误 –