如何使用JQuery將數據從一個HTML頁面傳遞到另一HTML頁面？

Question

我有兩個以這種方式在父子關系中工作的HTML頁面：

第一個具有一個按鈕，該按鈕執行以下兩項操作：首先，它通過AJAX調用從數據庫請求數據。 其次，它將用戶引導到具有所請求數據的下一頁，JavaScript將對其進行處理以填充第二頁。

我已經可以通過ajax調用獲取數據並將其放入JSON數組中：

$.ajax({
    type: "POST",
    url: get_data_from_database_url,
    async:false,
    data: params,
    success: function(json)
    {
        json_send_my_data(json);
    }
});

function json_send_my_data(json)
{
    //pass the json object to the other page and load it
}

我假設在第二頁上，一個“文檔就緒”的JavaScript函數可以輕松地處理所有數據的傳遞JSON對象的捕獲。 最好的測試方法是使用alert("My data: " + json.my_data.first_name); 在文檔准備功能中查看是否已正確傳遞JSON對象。

我只是不知道執行此操作的可靠方法。 我已經閱讀了論壇，並且知道使用window.location.url加載第二頁的基本知識，但是傳遞數據完全是另一回事了。

Answer 1

會話cookie可能會解決您的問題。

在第二頁上，您可以直接在帶有Server-Script標簽或站點document.cookie的cookie中進行打印。

在以下部分中，再次在Json中轉換Cookies

怎么樣？

Answer 2

我認為您有兩種選擇。

1）使用Cookie-但它們有大小限制。

2）使用HTML5網絡存儲 。

第二種最安全，可靠和可行的方法是使用服務器端代碼。

Answer 3

免責聲明：這很糟糕，但是這里有：

首先，您將需要此功能（我之前對此進行了編碼）。 此處的詳細信息： http : //refactor.blog.com/2012/07/13/porting-javas-getparametermap-functionality-to-pure-javascript/

它將請求參數轉換為json表示形式。

function getParameterMap () {
    if (window.location.href.indexOf('?') === (-1)) {
        return {};
    }
    var qparts = window.location.href.split('?')[1].split('&'),
        qmap   = {};
    qparts.map(function (part) {
        var kvPair = part.split('='),
            key    = decodeURIComponent(kvPair[0]),
            value  = kvPair[1];

        //handle params that lack a value: e.g. &delayed=
        qmap[key] = (!value) ? '' : decodeURIComponent(value);
    });
    return qmap;
}

接下來，在您的成功處理函數中：

success: function(json) {
    //please really convert the server response to a json
    //I don't see you instructing jQuery to do that yet!
    //handleAs: 'json'

    var qstring = '?';
    for(key in json) {
        qstring += '&' + key + '=' + json[key];
        qstring = qstring.substr(1); //removing the first redundant &
    }
    var urlTarget = 'abc.html';
    var urlTargetWithParams = urlTarget + qstring;

    //will go to abc.html?key1=value1&key2=value2&key2=value2...
    window.location.href = urlTargetWithParams;
}

在下一頁上，調用getParameterMap。

var jsonRebuilt = getParameterMap();
//use jsonRebuilt 

希望這會有所幫助（有一些額外的說明可以使事情變得很明顯）。 （記住，正如人們指出的那樣，這很可能是錯誤的方法）。

Answer 4

這是我有關兩個html頁面之間進行通信的帖子，它是純JavaScript並使用cookie： 瀏覽器選項卡/窗口之間的JavaScript通信

您可以在那里重復使用代碼以將消息從一頁發送到另一頁。

該代碼使用輪詢來獲取數據，您可以根據需要設置輪詢時間。

Answer 5

警告：這僅適用於單頁面模板，其中每個偽頁面都有其自己的HTML文檔。

您可以通過手動使用$.mobile.changePage()函數在頁面之間傳遞數據，而不是讓jQuery Mobile為您的鏈接調用它：

$(document).delegate('.ui-page', 'pageinit', function () {
    $(this).find('a').bind('click', function () {
        $.mobile.changePage(this.href, {
            reloadPage : true,
            type       : 'post',
            data       : { myKey : 'myVal' }
        });
        return false;
    });
});

這是有關此文檔： http : //jquerymobile.com/demos/1.1.1/docs/api/methods.html

您也可以簡單地將數據存儲在下一頁的變量中。 這是可能的，因為jQuery Mobile頁面存在於同一DOM中，因為它們是通過AJAX引入DOM的。 這是我不久前發布的答案： jQuery Moblie：傳遞參數並動態加載頁面內容