jQuery Mobile中的页面跳转和参数传递

　　jQuery Mobile中的页面跳转和参数传递

 

　　关于这一点，可以说很久很久，我对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 存储。