在静态HTML页面之间传值

来源：互联网发布：简述单片机的开发过程编辑：程序博客网时间：2024/06/10 04:07

最近接触到一个项目，没有使用JSP页面，前台页面全部使用的是静态的HTML，数据使用Ajax来加载，一直在蛋疼地写JavaScript，各种动态加载页面，觉得没有JSP方便，有时候需要在两个静态页面之间传递一些小数据，HTML5里面可以使用localStorage.setItem和localStorage.getItem来实现，那如果不使用HTML5呢，可以使用JS来获取window.location.href来实现。

具体实现

go.js:

/** * Created by Administrator on 2015/6/15. */(function($) {    $(document).ready(function() {        var url = decodeURI(window.location.href);        var index = url.indexOf('?');        if (index < 0) {            return;        }        var parameters = {};        var entrys = url.substring(++index, url.length).split('&');        for (var i = 0, len = entrys.length; i < len; i++) {            var entry = entrys[i].split('=');            parameters[entry[0]] = entry[1];        }        $.data(document, 'parameters', parameters);    });    $.jump = function(url, params) {        var entrys = [];        for(var i in params) {            entrys.push(i + '=' + params[i]);        }        if (!entrys.length) {            window.location.href = encodeURI(url);            return;        }        window.location.href = encodeURI(url + '?' + entrys.join('&'));    }    $.req = function(key) {        var parameters = $.data(document, 'parameters');        return parameters === undefined ? undefined : parameters[key];    }})(jQuery);

两个示例页面:

a.html:

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><button id="jump1">jump without patameters</button><button id="jump2">jump with parameters</button><script type="text/javascript" src="js/jquery-1.10.2.js"></script><script type="text/javascript" src="js/go.js"></script><script type="text/javascript">    $(document).ready(function() {        $('#jump1').on('click', function() {            $.jump('b.html');        });        $('#jump2').on('click', function() {            $.jump('b.html',{                username : 'admin',                password : '123'            });        });    });</script></body></html>

b.html:

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><script type="text/javascript" src="js/jquery-1.10.2.js"></script><script type="text/javascript" src="js/go.js"></script><script type="text/javascript">    $(document).ready(function() {        var username = $.req('username');        var password = $.req('password');        if (username == 'admin' && password == 123) {            alert('登陆成功!');        }    });</script></body></html>

a.html页面上两个按钮，一个带参数跳转，一个不带参数跳转。

点击第一个：

点击第二个：

可以看到数据已经传递过来了。

0 0