JQuery Mobile 页面参数传递(转)

在单页模版中使用基于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.return match && 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.<div class="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.<div class="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特性：

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>

通常，在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.<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.<div class="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.<div class="content" data-role="content">

35.<p>通过Alert显示来自前一个界面的参数。<br/>

36.<a href="#page_Parameter0">返回</a>

37.</p>

38.</div>

39.</section>

40.</body>

41.</html>

 

分类: HTML相关, JavaScript