javascript - 即使元素存在， document.getElementById(..) 也会给出 null

Question

我有以下程序，用户可以在搜索框中输入任何名称，然后将用户重定向到名为 usernameSearchResults.php 的页面，在该页面中打印从 usernamesearch 中以数组形式获取的用户名列表.php。这是 JavaScript:

$(window).on('load', function() {
$(".searchBarForm").submit(function(e){ 
    e.preventDefault();

    var search=document.getElementsByClassName("search")[0].value;     

    $.ajax
    ({
        type: 'POST',
        url: 'usernamesearch.php',
        data: 
        {
            search:search
        },
        success: function (response) 
        { 
            window.location.href="usernameSearchResults.php";
            response = JSON.parse(response);

            var array_length = Object.keys(response).length;//getting array length          

            for(var i=0;i<array_length;i++){

                if(i==0){
                    document.getElementById("searchResults").innerHTML="<a href=userprofile.php?id="+response[0].id+">"+response[0].username+"</a><br>";//i=0
                }else{
                    document.getElementById("searchResults").innerHTML+="<a href=userprofile.php?id="+response[i].id+">"+response[i].username+"</a><br>";
                }

            }

            window.stop();//stops page from refreshing any further(put here to fix a bug that was occuring)
        },
        error: function(xhr, status, error) {
            alert(xhr.responseText);
        }              
    });

return false;
})
});

这是 usernameSearchResults.php(标签内):

<h1>Username Search Results</h1>

<p id="searchResults"></p>

但问题是，每当我转到任何其他页面(例如index.php)并输入要搜索的用户名时，重定向到的页面确实是usernameSearchResults.php，但该页面是空白的，并且控制台中显示的错误显示为document。 getElementById("searchResults") 为 null。但是，如果我停留在 usernameSearchResults.php 页面并刷新它，然后再次搜索任何名称，则可以正确获得结果。这里有什么问题吗？

Answer 1

我想说的是，用户被重定向到 usernameSearchResults.php，但 JavaScript 代码仍在当前页面执行，该页面没有定义 id“searchResults”的元素。

正如 @Kashkain 所说，实现您想要的效果的一种方法是将您的响应变量传递到重定向网址中，然后将其处理到您的其他页面中。