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，但页面为空白，并且控制台显示的错误显示为文档。 getElementById（“searchResults”）为null。但是如果我留在页面usernameSearchResults.php并刷新它然后再搜索任何名称，那么结果都是正确获得的。这有什么问题？

Answer 1

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

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

Answer 2

我认为这里的问题是，当您调用getElementById时，仍然无法加载新文档。您可以在目标元素上添加一个侦听器，该侦听器将在load事件上触发。在此事件的处理程序中，您可以执行现在给出错误的操作。

我从未做过或试过这个，但也许这样的事情会起作用：

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

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

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

2 个答案: