-
在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数，而在多页模版中不需要与服务器进行通信，通常在多页模版中有以下三种方法来实现页面间的参数传递。
1、GET方式：在前一个页面生成参数并传入下一个页面，然后在下一个页面中进行GET内容解析。
2、通过HTML5的Web Storage进行参数传递。
3、建立当前页面变量，在前一个页面将所需传递的参数内容赋值到变量中，在后一个页面从变量中将参数取出来。（程序灵活性较弱）
一、以GET方式实现页面间参数传递
01.<!DOCTYPE html>02.<html>03.<head>04.<title>练习</title>05.<meta charset="utf-8"/>06.<meta name="viewport"content="width=device-width,07.initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />08.<link href="css/jquery.mobile-1.0.1.min.css"09.rel="stylesheet"type="text/css"/>10.<script src="js/jquery-1.6.4.js"11.type="text/javascript"></script>12.<script src="js/jquery.mobile-1.0.1.js"type="text/javascript"></script>13.<script type="text/javascript">14.function getParameterByName(name){15.var match = RegExp('[?&]'+ name +'=([^&]*)').exec(window.location.search);16.returnmatch && decodeURIComponent(match[1].replace(/+/g,' '));17.}18.$('#page_Parameter1').live('pageshow', function(event, ui){19.alert("第二个页面的参数："+ getParameterByName('parameter'));20.});21.</script>22.</head>23.<body>24.<section id="page_Parameter0"data-role="page">25.<header data-role="header">26.<h3>页面参数传值</h3>27.</header>28.<divclass="content"data-role="content">29.<p>传递参数进入下一页，以Alert方式显示参数内容。<br/>30.传递参数进入<a href="?parameter=4321#page_Parameter1"rel="external">下一页</a><br/>31.</p>32.</div>33.</section>34.<section id="page_Parameter1"data-role="page">35.<header data-role="header">36.<h3>页面参数传递</h3>37.</header>38.<divclass="content"data-role="content">39.<p>通过Alert显示前一个界面参数。<br/>40.<a href="#page_Parameter0">返回</a></p>41.</div>42.</section>43.</body>44.</html>
注意：要注明访问的页面形式为外部链接形式rel="external",否则页面间参数传递无法正常执行。
二、通过HTML5 Web Storage特性实现参数传递
通常包含两部分，sessionStorage是将存储内容以会话的形式存储在浏览器中，由于是会话级别的存储，当浏览器关闭之后，sessionStorage中的内容会全部消失。localStorage是基于持久化的存储，类似于传统HTML开发中cookie的使用，除非主动删除localStorage中的内容，否则将不会删除。
检查浏览器支持Web Storage特性：
通常，在jQuery Mobile中实现页面间参数传递时，我们不使用localStorage而是使用sessionStorage,因为不必持久化在本地。01.<!DOCTYPE html>02.<html>03.<head>04.<title>练习</title>05.<meta charset="utf-8"/>06.<meta name="viewport"content="width=device-width,07.initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />08.<link href="css/jquery.mobile-1.0.1.min.css"09.rel="stylesheet"type="text/css"/>10.<script src="js/jquery-1.6.4.js"11.type="text/javascript"></script>12.<script src="js/jquery.mobile-1.0.1.js"type="text/javascript"></script>13.</head>14.<body>15.<script type="text/javascript">16.if(window.localStorage){17.alert("浏览器支持localStorage");18.}else{19.alert("浏览器暂不支持localStorage");20.}21.22.if(window.sessionStorage){23.alert("浏览器支持sessionStorage");24.}else{25.alert("浏览器暂不支持sessionStorage")26.}27.</script>28.</body>29.</html>01.<!DOCTYPE html>02.<html>03.<head>04.<title>练习</title>05.<meta charset="utf-8"/>06.<meta name="viewport"content="width=device-width,07.initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />08.<link href="css/jquery.mobile-1.0.1.min.css"09.rel="stylesheet"type="text/css"/>10.<script src="js/jquery-1.6.4.js"11.type="text/javascript"></script>12.<script src="js/jquery.mobile-1.0.1.js"type="text/javascript"></script>13.<script type="text/javascript">14.$('#page_Parameter1').live('pageshow', function(event, ui){15.alert("第二个界面的参数："+ sessionStorage.id);16.});17.</script>18.</head>19.<body>20.<section id="page_Parameter0"data-role="page">21.<header data-role="header">22.<h3>页面参数传递</h3>23.</header>24.<divclass="content"data-role="content">25.<p>传递参数进入下一页，以Alert方式显示参数内容。<br/>26.传递参数进入<a href="#page_Parameter1"onclick="sessionStorage.id=4321">下一页</a><br/>27.</p>28.</div>29.</section>30.<section id="page_Parameter1"data-role="page">31.<header data-role="header">32.<h3>页面参数传递</h3>33.</header>34.<divclass="content"data-role="content">35.<p>通过Alert显示来自前一个界面的参数。<br/>36.<a href="#page_Parameter0">返回</a>37.</p>38.</div>39.</section>40.</body>41.</html>
HTML5移动开发之路 jQueryMobile页面间参数传递
最新推荐文章于 2023-10-31 12:39:43 发布
扫一扫
7797
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
