jQuery Mobile中的页面跳转和参数传递
2016-10-15 12:48
309 查看
jQuery Mobile中的页面跳转和参数传递
关于这一点,可以说很久很久,我对jQuery Mobile的页面跳转和参数传递也挺不适应的,可以说还在深入学习中。
jQuery Mobile的页面跳转有两种情况:
一种是从a.html跳转到b.html;
另一种是从a.html中的page1跳到page2,不跨页面。
我的体会是,如果一项功能有多个步骤,象某些软件的向导功能,有很多个“下一步”,这种情况适合将多个页面放在一个html文件中;
还有,如果象某些软件一样,有多个标签页,如“基本设置”、“高级设置”,这种情况也适合将多个页面放在一个html文件中。
其它情况下,我个人是不太喜欢将多个页面放在一个html文件中,因为这会造成单个html文件中的内容过多,难以维护。
在我们这个演示项目中,基本上每个文件完成一个功能,所以在本文中,着重探讨从a.html跳转到b.html时如何传递参数。
一、a.html中的代码:
在a.html中放一个超链接的做法也是可以的,这种做法我们也有演示。
这里的做法是使用javascript。window.location用于设置页面的位置,可以用于跳转。
参数直接用“?”添加在文件之后。
如果参数值是中文的,需要使用js函数进行转码。
二、b.html中的代码:
这里,getURLParameter是一个自定义的js函数,用于根据参数名取参数值。
location.search可以得到文件名后的参数,例如:“?id=1&name=jack”。
然后使用正则表达式对参数进行解析。
三、其它方式
这里演示的只是多种传参方式中的一种,因为它简单粗暴,所以我们暂时使用它。
如果它不能满足我们的软件需求,或者有性能上的问题,我们会继续寻求新的方案。
根据我查找到的资料,还有以下几种方式页面间的传参方式:
1. 将表单数据序列化,通过ajax提交给另一页面;
2. 将数据写入cookie,在另一页面中读出cookie;
3. 使用htm5新增的存储机制,参见:HTML 5 Web 存储。
关于这一点,可以说很久很久,我对jQuery Mobile的页面跳转和参数传递也挺不适应的,可以说还在深入学习中。
jQuery Mobile的页面跳转有两种情况:
一种是从a.html跳转到b.html;
另一种是从a.html中的page1跳到page2,不跨页面。
我的体会是,如果一项功能有多个步骤,象某些软件的向导功能,有很多个“下一步”,这种情况适合将多个页面放在一个html文件中;
还有,如果象某些软件一样,有多个标签页,如“基本设置”、“高级设置”,这种情况也适合将多个页面放在一个html文件中。
其它情况下,我个人是不太喜欢将多个页面放在一个html文件中,因为这会造成单个html文件中的内容过多,难以维护。
在我们这个演示项目中,基本上每个文件完成一个功能,所以在本文中,着重探讨从a.html跳转到b.html时如何传递参数。
一、a.html中的代码:
$(document).ready(function() { $("#button1").on("tap", function() { var id = 1; window.location = "b.html?id=" + id; }); ); });
在a.html中放一个超链接的做法也是可以的,这种做法我们也有演示。
这里的做法是使用javascript。window.location用于设置页面的位置,可以用于跳转。
参数直接用“?”添加在文件之后。
如果参数值是中文的,需要使用js函数进行转码。
二、b.html中的代码:
$(document).ready(function() { var id = getURLParameter("id"); alert(id); }); function getURLParameter(name) { return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null; }
这里,getURLParameter是一个自定义的js函数,用于根据参数名取参数值。
location.search可以得到文件名后的参数,例如:“?id=1&name=jack”。
然后使用正则表达式对参数进行解析。
三、其它方式
这里演示的只是多种传参方式中的一种,因为它简单粗暴,所以我们暂时使用它。
如果它不能满足我们的软件需求,或者有性能上的问题,我们会继续寻求新的方案。
根据我查找到的资料,还有以下几种方式页面间的传参方式:
1. 将表单数据序列化,通过ajax提交给另一页面;
2. 将数据写入cookie,在另一页面中读出cookie;
3. 使用htm5新增的存储机制,参见:HTML 5 Web 存储。
相关文章推荐
- jQuery Mobile学习之grid、等待显示的ajax效果、页面跳转、页面跳转传递参数等(二)
- 页面跳转,传递中文参数的方法
- asp.net mvc 2.0页面带参数跳转以及获取传递的参数
- JQueryMobile页面跳转参数的传递解决方案
- WP8页面跳转实现参数传递的多种方法
- asp页面新开加载页面,跳转传递参数
- Silverlight - Xaml 和 asp.net 页面之间跳转及参数传递
- JQueryMobile页面跳转参数的传递解决方案
- Activity中使用Intent实现页面跳转与参数的传递
- HTML页面做中间页跳转传递参数
- 11. jsp与servlet之间页面跳转及参数传递实例
- Silverlight之页面跳转及参数传递(9)
- wicket 之带参数传递的页面跳转
- JQuery Mobile 两个页面之间的参数传递
- jquery mobile 页面间的传递参数
- LinkButton跳转页面及传递参数
- 2.response跳转: a.客户端跳转,地址栏改变; b.所有代码执行完毕后跳转; c.跳转后的页面不能使用上一个页面的request属性; d.使用地址重写传递参数(respon
- ASP.NET页面跳转并传递参数
- jquerymobile页面跳转和参数传递
- 从jsp页面跳转到另一个jsp页面怎么传递参数?