• 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>
  • 相关阅读:
    免费的编程中文书籍索引【转】
    Linux字符集的查看及修改【转】
    expect学习笔记及实例详解【转】
    mycat学习笔记
    Vue-loader 开启压缩后的一些坑
    使用webpack搭建vue开发环境
    基于webpack和vue.js搭建开发环境
    Sublime Text 3 常用插件以及安装方法(vue 插件)
    NodeJS、NPM安装配置步骤(windows版本)
    Https方式使用Git@OSC设置密码的方式
  • 原文地址:https://www.cnblogs.com/super86/p/4329324.html
Copyright © 2020-2023  润新知