Question

好可爱的StackOverflow人员。

我尝试使用JavaScript AJAX和PHP创建动态页面。

我创建了一个包含唯一ID号1-12的图像列表。单击一个时，它应该将该id传递给更改页面的函数，然后使用id号将内容加载到新页面。

我的问题是，当我使用document.location更改页面（或window.assign）时，它不会在执行加载内容的以下代码之前更改页面。因此，它尝试将内容加载到当前页面上不存在的div，然后更改页面。有谁知道这是为什么？我怎么解决它？

我尝试将document.location和innerHTML代码放在不同的函数中，但是在页面更改之前仍然会调用下一个函数。我也尝试在内容加载之前放置一个if语句，但在页面更改之前也会调用它。

这是我的代码：

    function output (bookList){
         for (var i = 0; i < titles.length; i++) {  
         document.getElementById("insertBooksHere").innerHTML += "<ul class=\"bookItem\">";
            for (var t = 0; t<position.length; t++){ 

                if (t==position.length-1)
                        {
                            x = bookList[i][0];
                            document.getElementById("insertBooksHere").innerHTML += "<img class=\'books\'  id = \'" + x + "\' src=\'" +bookList[i][t]+ "\' onClick=\'getBookDetails("+ x +")\'>";
                        }
                        else 
                if ( t == 1 || t==2){   
                        document.getElementById("insertBooksHere").innerHTML += "<li>"+bookList[i][t]+"</li>";
                        }
            }
        document.getElementById("insertBooksHere").innerHTML += "</ul></div>";
    }
    }


    function getBookDetails(id){
        bookID = id;    
        for ( var t = 0; t<12; t++)
        {
        bookDetails[t] = bookList[bookID-1][t];//grab details about specified book from array using x as the value for i.
        }
        loadBookPage(bookID, bookDetails)
    }


function loadBookPage(bookID, bookDetails){
    console.log(window.location.href);
}


function loadBookDetails(){
if ( document.location == 'books/'+bookID+'.php')
{
        x = bookID;
    console.log(bookDetails);
         document.getElementById("book").innerHTML += "<ul class=\"bookItem\">";

        for (var t = 0; t<position.length; t++){ 

            if (t==position.length-1)
                    {
                        document.getElementById("book").innerHTML += "<img class=\'books\' id = \'" + x + "\' src=\'" +bookDetails[t]+ "\'>";

                    }
                    else {  
                    document.getElementById("book").innerHTML += "<li>"+bookDetails[t]+"</li>";
                    console.log("for loop");
                    }
        console.log(bookDetails[t]);
        }
    document.getElementById("book").innerHTML += "</ul>";
    document.getElementById("book").innerHTML += "HELLO!!!";
    }
}

你可以在这里看到我的作品：http://itsuite.it.brighton.ac.uk/rlr17/bookClub/home.php

谢谢你们！真的很感谢你的帮助。

Answer 1

我的问题是，当我使用document.location更改页面（或window.assign）时，它不会在执行加载内容的以下代码之前更改页面。

这就是JavaScript（在运行客户端时，嵌入在网页中）的工作原理。

它在该页面中运行。

如果页面消失（因为您加载了新页面），那么它的执行环境会消失并停止运行。

如果您想在下一页中执行某些操作，则必须将一些数据传递到该页面，并在新页面中使用代码读取该数据并执行操作它

理想情况下，您可以使用服务器端代码（it is more reliable执行此操作，并且无论如何在加载新页面时很少有额外的运行时成本。）

在后续代码之后制定了document.location

1 个答案: