jquery mobile 1.4.5 单页模板href querystring ajax

Question

我是 JQM 的新手（我使用 1.4.5），我的 webapp（asp.net C# apache Cordova）仅包含许多单独的 .cshtml（单页模板）页面。我正在使用 Android 4.2.2 在三星 Galaxy Grand 上测试我的 webapp

A. 我不确定我对“链接页面”的理解，即使在阅读了所有关于此的 JQM 文档以及阅读了很多关于这个主题的关于将查询字符串值传递到另一个页面的帖子之后；主要是因为我发现几乎所有示例都针对在单个 html 页面中为内部页面（多页模板）提供答案。

所以我请你们中的一些JQM专家确认或更正我对以下的理解......

从 JQM 文档中我了解到

1. 我可以在任何链接中使用（例如按钮），href="page2.cshtml?par1=1&par2=2";并且 JQM 将自动使用 Ajax 使该链接正常工作。

2. 我还了解到，在同一域的不同 html 页面的这种情况下始终允许使用查询字符串，并且它会自动通过 Ajax 工作；只要 rel="external"、data-ajax="false" 等 attr 不在同一个链接中使用即可。

3. 但仅在内部页面（多页面模板）的情况下不允许使用查询字符串....；

4. 如果我需要使用上面的 href 链接到另一个域中的页面，例如www.anotherdomain.com/page2.cshtml?par1=1&par2=2，那么我需要使用rel="external"。

我以上所有观点（反映我的理解）都是正确的吗？请确认 ro 请纠正我...

B. 在我的应用程序中，我发现大多数链接都按照我上面的理解工作，连接到同一域中的不同页面；我认为它是通过 Ajax 发生的。这是对的吗？我还可以在 page2 中使用查询字符串参数（即 To-Page）。

1. 但在一种情况下，尽管它有效，但在 To-Page 中，面板功能无法正常运行，除非我在 href 链接中引入 rel="external' !!! 我想这意味着它不是AJAX 了？我也找不到原因..

2. 进一步独立于上述主题，我面临另一个问题。加载时间（即显示 To-Page 所用的时间）会有所不同。

大多数情况下都可以，但有时加载循环会永远持续下去......我认为它已经崩溃了......？？？然后如果我使用后退按钮返回并再次前进，很多时候它会立即加载......!!!!!! 有什么想法或建议.....？

感谢期待... 拉特纳

Answer 1

在您担心如何将属性从一个页面传递到另一个页面之前，您需要了解多页面和多 HTML 模板之间的区别。

多 HTML 页面模板

1. 更小更轻，每个 data-role=”page” 都在一个单独的 HTML 文件中，页面结构更加模块化。
2. 如果从 HEAD 内容或任何不是 data-role="page" div 的内容中删除每个后续 HTML 页面，则可能会变得更小。不幸的是，在这种情况下，如果不支持 JavaScript，则回退是不可能的。
3. DOM 尺寸比较小，只有第一页永久加载到 DOM 中，其他页面也会加载到 DOM 中但同时在不主动使用时也会被移除，基本上每次从它。
4. 如果不支持 JavaScript，则更好的回退。页面刷新后在桌面浏览器中效果很好，主要是因为每个 HTML 页面都有一个现有的 HEAD 内容。这也使您的应用可以像普通网络应用一样运行，主要是因为可以关闭 AJAX。

多页模板

1. 由于所有页面都已加载，因此不会生成额外的页面间导航请求。
2. 文件越大，第一次加载越慢，但随后的页面导航速度很快，因此过渡更加流畅。几乎原生般的流畅，强调一下。
3. 适用于相对较小的应用程序和您了解目标平台功能（包括是否支持 JavaScript）的情况，因此使其成为混合应用程序的绝佳解决方案。它作为 Phonegap 应用程序比多 HTML 模板效果更好。
4. “页面”数据角色元素是必需的。

可以在此处找到有关此主题的更多信息：Multipage template vs Multi HTML template in jQuery Mobile

现在我们来谈谈如何在 jQuery Mobile 页面之间正确传递数据。

1. jQuery Mobile 默认使用 AJAX
2. 您可以使用 rel="external" 关闭 AJAX
3. 如果您关闭 AJAX，您将失去 jQuery Mobile 的所有优点，包括动画。因此，如果您不希望更好地处理 AJAX 页面，请寻找其他一些响应式框架，例如 Bootstrap 或 Foundation。
4. 如果您不想使用 AJAX，您仍然可以使用查询字符串，但在 href 中或通过 changePage 函数。

更好的查询字符串替代方案：

1. 全局对象。

如果您使用 AJAX，您可以简单地使用全局对象来存储您的所有数据。

类似这样的：

// Store object
var storeObject = {
    parameter1: null,
    parameter2 : null
}

1. 从上一页访问数据

同样，如果您使用 AJAX，则不需要传递任何数据，因为所有数据都保存在 DOM 中。

// Store object
$(document).on('pagebeforeshow', '#second', function(e, data){     
    alert("My name is " + data.prevPage.find('#test-input').val());
});

1. 本地存储或会话存储

无论您是否使用 AJAX，此解决方案都可以使用。

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).on('click', '#change-page-button', function(){     
        // store some data
        if(typeof(Storage)!=="undefined") {
              localStorage.firstname="Dragan";
              localStorage.lastname="Gaic";            
        }
        // Change page
        $.mobile.changePage("#second");
    });    
});

$(document).on('pagebeforeshow', '#second', function(){       
    alert('My name is ' + localStorage.firstname + ' ' + localStorage.lastname);
    // Lets change localStorage data before we go to the next page
    localStorage.firstname="NewFirstNeme";
    localStorage.lastname="NewLastName";    
});

$(document).on('pagebeforeshow', '#third', function(){       
    alert('My name is ' + localStorage.firstname + ' ' + localStorage.lastname);
});

4. 通过changePage函数或href发送数据

   // Send
   $.mobile.changePage('page2.html', { dataUrl : "page2.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true});
   

   或

   <a href="second.html?paremeter=123" data-role="button">Send parameter</a>
   

   接收相同的数据：

   $(document).on('pagebeforeshow', "#index", function (event, data) {
       var parameters = $(this).data("url").split("?")[1];;
       parameter = parameters.replace("parameter=","");  
       alert(parameter);
   });
   

如果您需要有关此解决方案的更多信息，包括工作示例，请在此处找到它们：Passing data between jQuery Mobile pages

这里提到的几种方法在 1.4 版中已弃用（仍然可用）。尽管您不必担心这一点，但这里的几乎所有内容在 1.5 版中都将无法使用。这个新版本将从下到上对 jQuery Mobile 进行大修。

更新

1. 是的，您可以使用任何此类链接，并且 jQuery Mobile 将使用 AJAX。如果您查看我之前的示例，您会发现一个有效的示例。
2. 如果您想要 AJAX，则不能使用 rel="external", data-ajax="false"，尽管字符串查询可以在机器人案例中使用。
3. 正确，它们仅适用于多 HTML 模板。虽然曾经有一个 3rd 方插件允许它与多页模板一起使用，但我认为它不适用于较新的 jQuery Mobile 版本。
4. 正确，如果要链接外部页面，则需要使用 rel="external"。