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标记或site document.cookie

直接在Cookie中打印

在下一节中再次转换Json中的Cookie

怎么样？

Answer 2

我认为你有两种选择。

1）使用cookies - 但它们有尺寸限制。

2）使用HTML5 web storage。

下一个最安全，最可靠和最可行的方法是使用服务器端代码。

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，它使用cookies： Javascript communication between browser tabs/windows

您可以在那里重复使用代码将消息从一个页面发送到另一个页面。

代码使用轮询来获取数据，您可以根据需要设置轮询时间。

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: passing parameters and dynamically load the content of a page

如何使用JQuery将数据从一个HTML页面传递到另一个HTML页面？

5 个答案: