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确实如此，但只是第一次。

Answer 2

您的问题似乎是您正在检索的数据在第一次执行时没有及时加载，因为AJAX调用是异步。因此，当您致电public function deletePage ($session_id, $page_id, $url) { //Database Connection $db = Database::getInstance(); //Validate page belongs to current user. if ($this->checkpageOwner($session_id, $page_id)) { //Delete page $query = $db->getConnection()->prepare("DELETE FROM pages WHERE page_id = :page_id; DELETE FROM ratings WHERE page_id = :page_id; DELETE FROM comments WHERE page_id = :page_id; DELETE FROM views WHERE page_id = :page_id"); $query->execute(array( ':page_id' => $page_id )); //Redirect header("Location: index.php"); } else { //Set error message setcookie("sessionPersist", 1); $_SESSION['message'] = "You don't own this page."; //Redirect header("Location: " . $url); } }时，getIDs(data)可能尚未加载（这就是为什么它正在进行后续调用）。

解决此问题的一种方法是使用承诺。您可以执行以下操作，而不是使用data：

success

StackOverflow上的

This post很好地解释了它。

AJAX偶尔不工作

2 个答案: