javascript - AJAX 偶尔不工作

Question

我正在尝试制作一个 chrome 扩展程序来获取 Youtube 视频的 ID，但遇到了问题。对于第一次执行，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);
    });
});

我这辈子都弄不明白哪里出了问题。提前感谢您的帮助。

编辑

我忘了提，但它给了我一个未定义的错误。对不起!!

Answer 1

我尝试了您的 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 会，但只是第一次。