JqueryMobile (JQM)、Json 并将数据传递到新页面答案

【问题标题】：JqueryMobile (JQM), Json and passing data to a new pageJqueryMobile (JQM)、Json 并将数据传递到新页面
【发布时间】：2012-06-06 09:53:02
【问题描述】：

希望你们一切都好，并使用您的代码编辑器。

我的问题是如何将 url rel 传递给新页面以供将来使用？

让我举一个比 1000 字更好的例子。

在页面“A”上，我有指向页面“B”的 url，加载页面“B”html 我将该 url 直接指向页面“B”作为<a href="page-B.html" rel="{{id}}">{{deptName}}</a>（不要看{{}}，它是 Mustache .js 标签）。

因此，当我单击该链接时，它会正常工作，将我指向页面“B”并加载我的新 html 布局（与页面“A”不同）。

现在因为我要从 JSON 中获取数据，所以我需要将 rel="{{id}}" 传递到 page-B 以告知我想要从 JSON 中获取哪些数据。

你有什么好的想法或实用的代码吗？

谢谢！

附言

在 $.delegate 的“B”页上，我需要该 id 来执行类似操作：

$.ajax({
        beforeSend: function() { $.mobile.showPageLoadingMsg() }, //Show spinner
        complete: function() { $.mobile.hidePageLoadingMsg() }, //Hide spinner
        url: 'http://website.com/categoryJSON.ashx?&catId=THE_ID&callback=?',
        dataType: 'json',
        success: function(data) {
            var template = $('#pageCategoryTpl').html();
            var html = Mustache.to_html(template, data);
            $('[data-role=content]:first').html(html);
        }
    });

【问题讨论】：

2 个问题 - 你累了什么？页面 B 是外部页面还是多页面模板的一部分？

标签： jquery json jquery-mobile

【解决方案1】：

尝试以下方式跨页面传输多个数据。

HTML

<a href="#detail?id=1234&another_id=5678" id="carrier-btn" data-role="button">link button with extra data</a>

$(document).bind('pageshow', function(evt, data) {
    var id = queryParam("id"); //def of queryParam() in below fiddle
    var anotherId = queryParam("another_id");
    //console.log(id);
    //console.log("page show", evt, data);
    $(evt.target).find("#queryData").text(id);
    $(evt.target).find("#queryData1").text(anotherId);
});

完整来源http://jsfiddle.net/dhavaln/MPmJH/

【讨论】：

【解决方案2】：

我找到了一个简单的解决方案，它是 window.sessionStorage。

在我的特定情况下，我单击 URL/链接，获取 href（这是我的 id 所在的位置），使用 window.sessionStorage 保存它，更改 window.location 到新页面，做我的 JSON 魔术。

代码：

在“A”页上：

$('a').live('click', function(){

        var currentID = $(this).attr('href');

        window.sessionStorage.setItem('parentId', currentID);

        window.location = 'page-B.html';

        return false;

        });

在“B”页上：

var parentId = sessionStorage.getItem('parentId');

$.ajax({
 url: 'http://www.url.com/file.json?id=' + parentId + '',
 dataType: 'json',
 success: function(data) {
    alert('Success!');
 }
});

哇！希望对某人有所帮助。

【讨论】：

【解决方案3】：

您可以使用全局变量来解决您的问题，而不是传递查询字符串（网址数据）。

例如：

// Your global variable 
var global_varible = '';

在页面 A，

global_varible = your_data;

在页面B，你可以访问global_varible

【讨论】：