jquery mobile 1.4.5单页模板href querystring ajax

时间：2015-07-31 10:40:25

标签： asp.net ajax jquery-mobile

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

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

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

从JQM文档我明白了

  1. 我可以在任何链接中使用（例如按钮），href =＆＃34; page2.cshtml？par1 = 1＆amp; par2 = 2＆＃34 ;;并且JQM将自动使用Ajax使此链接起作用。

  2. 我也理解在相同域的不同html页面的情况下总是允许使用查询字符串，它将自动通过Ajax工作;只要at =例如rel =＆＃34; external＆＃34;，data-ajax =＆＃34; false＆＃34;不在同一链接中使用。

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

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

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

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

    1. 但在一个案例中，尽管它有效，但在To-Page中，Panel功能无法正常运行，除非我引入rel =＆＃34; external＆＃39;在href链接！我想这意味着它不再是AJAX了吗？此外，我无法找到原因..

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

      3. 大多数情况下都没关系，但有时候装载圈会永远持续下去....我猜它已经崩溃了...... ???然后，如果我使用后退按钮返回并再次出现，很多时候会立即加载...... !!!!! 有什么想法或建议.....？

      感谢期待...... 拉特纳

1 个答案:

答案 0 :(得分：2)

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

多HTML页面模板

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

    5. 多页模板

    1. 由于所有页面都已加载，因此不会为在页面之间导航生成其他请求。
    2. 文件大小越大，首次加载速度越慢，但后续页面导航速度越快，从而使转换更加顺畅。几乎像原生一样流畅，几乎都在强调。
    3. 适用于相对较小的应用程序和情况，您可以了解目标平台的功能，包括JavaScript支持，从而使其成为混合应用程序的理想解决方案。它作为Phonegap应用程序，然后是多HTML模板，效果更好。
    4. “page”数据角色元素是必需的。

      5. 有关此主题的更多信息，请访问：Multipage template vs Multi HTML template in jQuery Mobile

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

      1. jQuery Mobile默认使用AJAX
      2. 您可以使用rel =“external”
        3. 关闭AJAX
      3. 如果您关闭AJAX，您将失去几乎所有关于jQuery Mobile的好消息，包括动画。因此，如果您不希望AJAX页面处理更好地找到其他响应式框架，如Bootstrap或Foundation。
      4. 如果你不想使用AJAX，你仍然可以使用查询字符串但是在href内或通过changePage函数。

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

        1. 全球对象。

          2. 如果您正在使用AJAX，您只需使用全局对象来存储所有数据。

          这样的事情：

          // Store object
var storeObject = {
    parameter1: null,
    parameter2 : null
}
          1. 访问上一页的数据

            2. 再次，如果您使用的是AJAX，则不需要传递任何数据，因为所有数据都在DOM中。

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

              2. 无论您是否使用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);
});

              1. 通过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);
});

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

                此处提到的几种方法在版本1.4中已弃用（仍可使用）。虽然您不需要担心，但1.5版本中几乎所有内容都将无法使用。这个新版本将从底部到顶部彻底改造jQuery Mobile。

                更新

                1. 是的，您可以使用任何此类链接，jQuery Mobile将使用AJAX。如果你看看我之前的例子，你会找到一个有效的例子。
                2. 如果你想要AJAX，你不能使用rel =“external”，data-ajax =“false”虽然stringquerys可以在bot案例中使用。
                3. 更正它们只能在多HTML模板中使用。虽然曾经有一个第三方插件允许它使用多页模板，但我不认为它适用于较新的jQuery Mobile版本。
                4. 正确，如果要链接外部页面，则需要使用rel =“external”。
相关问题
最新问题