在dojo中將值從一個頁面傳遞到另一個頁面

Question

我有一個在dojo中設計的獨立頁面（page1.htm），它有兩個過濾器和一個網格。輸入過濾網格中的值時會填入值。 現在我不得不開發另一個頁面（page2.htm），其中有一個網格。 現在，當用戶點擊網格中的一行時，我需要從這裏傳遞值（與page1的過濾器相同）到page1，並根據從page2.htm傳遞的值來填充網格。

請讓我知道我可以做到這一點

Answer 1

有許多方法可以做到這一點，但我認爲對於大多數情況下，最簡單的方法只是傳遞值作爲URL參數。

重要的是您知道這與Dojo沒有任何關係。這是標準的基本Web瀏覽器功能。也就是說，Dojo確實有一個模塊，您可能會發現它有幫助：dojo/io-query（我在這裏假設您使用的是最新版本的Dojo）。

比方說你的page1.htm有一個叫做rowClicked的函數，當點擊一個網格行的時候會調用它。在此函數中，您可以獲取page2.htm所需的值，然後告訴瀏覽器打開page2.htm，並將值附加爲URL參數。

var rowClicked = function() { 
    var someValue = getSomeValue(), 
     someArray = [ 13, 42 ]; 

    window.location.replace('./page2.htm?someValue=' + someValue + 
             '&someArray=' + someArray[0] + 
             '&someArray=' + someArray[1]); 
}; 

如果你有很多值，那可能有點麻煩。讓我們使用Dojo的IO-查詢，而不是：

require([/*..your other dependencies..,*/ "dojo/io-query"], 
    function(/*..other dependencies..,*/ ioQuery) { 

    //.. your other code .. 
    var rowClicked = function() { 
     var values = { 
      someValue: getSomeValue(), 
      someArray: [ 13, 42 ] 
     }; 

     window.location.replace('./page2.htm?' + 
           ioQuery.objectToQuery(values)); 
    }; 
    // .... 

在page2.htm，比方說在加載頁面時，一個名爲loadValues函數被調用。在這個函數中，我們從URL參數中獲取值，並隨我們的需要做任何事情。我們再次使用Dojo的io-query。 （但請記住，你可以很容易地做到這一點沒有任何圖書館也看到這個答案的一些想法：How can I get query string values in JavaScript?）

var loadValues = function() { 
    var page1Values= ioQuery.queryToObject(window.location.search.slice(1)); 
    console.log("Here are the values: ", 
       page1Values.someValue, 
       page1Values.someArray[0], 
       page1Values.someArray[1]); 
}; 

（同樣，你必須更早在你的代碼加載dojo/io-query，當然）。

在上面的例子中，我們使用了URL參數來將值從page1發送到page2。當頁面2被請求時，URL參數被髮送到服務器，所以它們可能會與URL中的其他參數相沖突。

在仍使用瀏覽器位置的同時將值傳遞給page2的另一種方法是使用它的「散列」部分。發現微小差異：

your.site/page2.htm?someValue=abc&someArray=13&someArray=42 // URL parameters 
your.site/page2.htm#someValue=abc&someArray=13&someArray=42 // hash part 

第二行中的參數不會發送到服務器。正如你所期望的那樣，對上述代碼的改變將會很小。在page1.htm，請用window.location的行：

window.location.replace('./page2.htm#' + 

..和Page2上，改變與window.location的行：

var page1Values= ioQuery.queryToObject(window.location.hash);