0

我正在尝试创建一个 JQM 应用程序，并通过从数据库中获取大量数据来实现。当我单击 ajax/json 生成的日历列表中的链接时，我应该能够通过调用服务器并获取数据来获取该事件的信息。就像现在一样，我分两步执行此操作。

我的 ajax 生成的事件列表：

$.each(groupcalendar, function (i, val) {
    output += '<li><a href="#" data-id="' + val.mid + '" id="gotoMatch"><h2>' + val.matchformname + '</h2><p><strong>' + val.matchday + '</strong></p><p>' + val.coursename + '</p><p class="ui-li-aside"><strong>' + val.matchtime + '</strong></p></a></li>';
});

当我单击其中一个链接时，我想转到一个名为 prematchdata.html 的页面并从该特定事件中获取数据。为此，我首先调用 click 并从 data-id 获取 eventid，如下所示：

$(document).on('click', '#gotoMatch', function () {

    var matchid = $(this).attr("data-id");

    $.get("http://mypage.com/json/getmatchinfo.php?matchid="+matchid, function(data) {

        localStorage["matchinfo"] = JSON.stringify(data);

        $.mobile.changePage( "prematchdata.html", { transition: "slide", changeHash: true} );

    }, "json");

});

我将返回的数据保存为 localStorage，然后在我的 pageinit 中使用这些数据，如下所示：

$(document).on("pageinit", "#prematchdata", function() {

    var matchinfo = {};
    matchinfo = JSON.parse(localStorage["matchinfo"])

    var content = '<h2>'+matchinfo["matchname"]+'</h2>';

    $('.infoholder').html(content);

});

它有效，虽然对我来说似乎最后两个步骤应该在一个步骤中完成，但我不知道该怎么做？好像有点不对，获取数据，保存到本地再使用？这不能没有$(document).on('click', '#gotoMatch', function () {}); ?

希望得到一些帮助并提前感谢:-)

4

1 回答 1

1

您可以尝试使用查询字符串发送它。当你使用changePage时，改变你的代码是这样的：

$(document).on('click', '#gotoMatch', function () {

    var matchid = $(this).attr("data-id");
    $.get("http://mypage.com/json/getmatchinfo.php?matchid=" + matchid, function (data) {
        paramData = data[0];
        $.mobile.changePage("prematchdata.html", {
            transition: "slide",
            changeHash: true,
            data: paramData //added this extra parameter which will pass data as a query string
        });
    }, "json");

});

拿回来的时候，

$(document).on("pageinit", "#prematchdata", function() {

    var url = $.url(document.location);
    var name= url.param("matchname");

    var content = '<h2>'+ name +'</h2>';

    $('.infoholder').html(content);

});

另一种简单的方法是使用单页模板而不是多页模板。然后，您可以只使用全局变量来获取和设置数据。

也就是说，您现在所做的比这种查询字符串方法更安全。通过使用它，任何人都可以看到您通过 URL 发送的内容。所以我建议你继续使用localStorage. 有关这方面的更多信息，请查看此问题。

于 2013-08-05T20:07:29.133 回答