Javascript 即使元素存在，getElementById（..）也会给出null

我有一个程序，在这个程序中，用户可以在搜索框中输入任何名称，然后我将用户重定向到一个名为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;
})
});

$（窗口）.on（'load'，function（））{
$（“.searchBarForm”）.submit（函数（e）{
e、 预防默认值（）；
var search=document.getElementsByClassName（“search”）[0]。值；
$.ajax
({
键入：“POST”，
url:'usernamesearch.php'，
数据：
{
搜索：搜索
},
成功：功能（响应）
{ 
window.location.href=“usernameSearchResults.php”；
response=JSON.parse（response）；
var array_length=Object.keys（response）.length；//获取数组长度
对于（var i=0；i
“；//i=0
}否则{
document.getElementById（“searchResults”）.innerHTML+=“
”；
}
}
window.stop（）；//停止页面进一步刷新（放在这里修复正在发生的错误）
},
错误：函数（xhr、状态、错误）{
警报（xhr.responseText）；
}              
});
返回false；
})
});

这是usernameSearchResults.php（内部标记）：

用户名搜索结果

---

但问题是，每当我转到任何其他页面（比如index.php）并输入要搜索的用户名时，重定向到的页面实际上是usernameSearchResults.php，但该页面是空白的，控制台中显示的错误是document.getElementById（“searchResults”）是null。但是如果我停留在usernameSearchResults.php页面并刷新它，然后再次搜索任何名称，那么结果都是正确的。这里有什么问题？

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

---

正如@Kashkain所说，实现您想要的功能的一种方法是在重定向url中传递您的响应变量，然后将其处理到另一个页面。

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

---

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

我认为这里的问题是，在调用getElementById时，新文档很可能还没有加载。 您可以在目标元素上添加一个侦听器，该侦听器将在加载事件中触发。在该事件的处理程序中，您可以执行现在给您带来错误的操作

我从未做过或尝试过，但也许类似的方法会奏效：

$('#searchResults').on('load', function() {
   //execute code here
});

---

或者您可以使用action=“target\u url”method=“post”向页面添加表单"然后通过form.submit通过post发送您的响应数据，并将有问题的代码放入usernameSearchResults.php，这将需要从post读取数据-这样您可以将ajax数据发送到新页面

我认为这里的问题是，在调用getElementById时，新文档很可能还没有加载。 您可以在目标元素上添加一个侦听器，该侦听器将在加载事件中触发。在该事件的处理程序中，您可以执行现在给您带来错误的操作

我从未做过或尝试过，但也许类似的方法会奏效：

$('#searchResults').on('load', function() {
   //execute code here
});

---

或者您可以使用action=“target\u url”method=“post”向页面添加表单然后通过form.submit通过post发送您的响应数据，并将有问题的代码放入usernamearchresults.php，这将需要从post读取数据-这样您就可以将ajax数据发送到新页面

ohh，，那么我应该如何解决这个问题呢？@KlaraNewbie Pass变量在url上，在重定向页面上添加js脚本，然后进行处理如果你从ajax成功重定向中获得变量，这应该被添加到答案中。我理解你的意思，但是在url中传递整个数组安全有效吗？@Aigloun所以我试着按照你说的做，但是我在传递数组时的url显示[object][object]..我该如何摆脱这个问题？有没有办法通过POST传递数组？哦，那么我该如何解决这个问题呢？@KlaraNewbie在url上传递变量，在重定向页面上添加js脚本，如果你从ajax成功重定向中获得变量，则进行处理。这应该添加到答案中。我理解你的意思，伙计们，但这安全吗d在url中传递整个数组是否有效？@Aigloun所以我试着按照你说的做，但是我在传递数组时的url显示了[object][object]……我如何摆脱这个问题？有没有办法通过POST传递数组？为什么使用

document.getElementById（）

和jQuery同时使用？事实上，我发现这更容易理解，你不应该将jQuery和vanilla JS混用。为什么要强迫用户下载jQuery文件，然后甚至不使用它呢？另外，当你在一个代码文件中包含jQuery对象和JS对象或DOM元素时，可能会产生混淆。为什么要使用

document.getElementById（）

和jQuery同时使用？事实上，我觉得这更容易理解，你不应该把jQuery和vanilla JS混在一起。为什么要强迫用户下载jQuery文件，然后甚至不使用它呢？另外，如果在一个代码文件中包含jQuery对象和JS对象或DOM元素，可能会产生混淆。