html5 get请求 html get方法

转载

laojean 2023-12-22 10:25:50

文章标签 html5 get请求 html 存储数据父窗口 文章分类 HTML5 移动开发

补充：model
控制器

@RequestMapping("/toupdate")
	public String toupdade(HttpServletRequest request,Model model) {
		model.addAttribute("jianliid",Integer.parseInt(request.getParameter("id")));//传值到下一路径
		return "/toupdate";
	}

html：

<input id="jianli" th:value="${jianliid}" type="text" class="yc">

1、get方式，url携带参数
可以通过window.location.search获取url上的参数。如下面的示例。

个人补充：

function GetQueryString(name)
{
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  decodeURI(r[2]); return null;
}
 
// 调用方法
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
alert(GetQueryString("参数名3"));

个人补充2（传递数组）：

window.top.location.href = baseURL + "xiangmu/ach/exportExcel?token="+token+"&ids=1&ids=2";//js中传递数组参数

控制台：
System.out.println(request.getParameterValues("ids")[1]);//输出为2

a.html

跳转

b.html
getUrlParam.js
UrlParam = function() { // url参数
 　　var data, index;
 　　(function init() {
 　　　　data = []; //值，如[[“1”,“2”],[“zhangsan”],[“lisi”]]
 　　　　index = {}; //键:索引，如{a:0,b:1,c:2}
 　　　　var u = window.location.search.substr(1);
 　　　　if (u != ‘’) {
 　　　　　　var params = decodeURIComponent(u).split(’&’);
 　　　　　　for (var i = 0, len = params.length; i < len; i++) {
 　　　　　　　　if (params[i] != ‘’) {
 　　　　　　　　　　var p = params[i].split("=");
 　　　　　　　　　　if (p.length == 1 || (p.length == 2 && p[1] == ‘’)) {// p | p= | =
 　　　　　　　　　　　　data.push([’’]);
 　　　　　　　　　　　　index[p[0]] = data.length - 1;
 　　　　　　　　　　} else if (typeof(p[0]) == ‘undefined’ || p[0] == ‘’) { // =c 舍弃
 　　　　　　　　　　　　continue;
 　　　　　　　　　　} else if (typeof(index[p[0]]) == ‘undefined’) { // c=aaa
 　　　　　　　　　　　　data.push([p[1]]);
 　　　　　　　　　　　　index[p[0]] = data.length - 1;
 　　　　　　　　　　} else {// c=aaa
 　　　　　　　　　　　　data[index[p[0]]].push(p[1]);
 　　　　　　　　　　}
 　　　　　　　　}
 　　　　　　}
 　　　　}
 　　})();
 　　return {
 　　　　// 获得参数,类似request.getParameter()
 　　　　param : function(o) { // o: 参数名或者参数次序
 　　　　　　try {
 　　　　　　　　return (typeof(o) == ‘number’ ? data[o][0] : data[index[o]][0]);
 　　　　　　} catch (e) {
 　　　　　　}
 　　　　},
 　　　　//获得参数组, 类似request.getParameterValues()
 　　　　paramValues : function(o) { // o: 参数名或者参数次序
 　　　　　　try {
 　　　　　　　　return (typeof(o) == ‘number’ ? data[o] : data[index[o]]);
 　　　　　　} catch (e) {}
 　　　　},
 　　　　//是否含有paramName参数
 　　　　hasParam : function(paramName) {
 　　　　　　return typeof(paramName) == ‘string’ ? typeof(index[paramName]) != ‘undefined’ : false;
 　　　　},
 　　　　// 获得参数Map ,类似request.getParameterMap()
 　　　　paramMap : function() {
 　　　　　　var map = {};
 　　　　　　try {
 　　　　　　　　for (var p in index) { map[p] = data[index[p]]; }
 　　　　　　} catch (e) {}
 　　　　　　return map;
 　　　　}
 　　}
 }();

此处代码参照：

2、通过cookie，传递
cookie能够存储少量数据到客户端的磁盘中，特定的网页之间是可以共享cookie中的数据。

a.html

b.html

此处使用了jquery.cookie.js,具体用法可参照此篇文章：

3、window.open和window.opener之间传值
window.open可以打开一个新的页面，在新的页面中可以通过window.opener获取父页面的窗口对象，从而可以获取父窗口中的参数。

a.html

打开新的页面

b.html

4、h5技术，window.localStorage存储数据
在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。此方法类似cookie，将数据存在一个公共的地方，实现页面之间传值。

a.html

b.html

总结
对于不同的解决方法，都有优缺点

1、url携带参数

优点：取值方便，可以跨域，利于页面分享，没有环境限制。

缺点：url携带参数值的长度有限制。

2、cookie方式

优点：可以在同源内的的任意网页中访问，存储数据的周期可以自由设置。

缺点：有长度限制。

3、设置窗口之间的父子关联关系

优点：取值方便.只要window.opener指向父窗口,就可以访问所有对象.不仅可以访问值,还可以访问父窗口的方法.值长度无限制。
缺点:两窗口要存在着关系.就是利用window.open打开的窗口。不能跨域。

4、h5技术，window.localStorage存储数据