5分钟学会Layer.open()使用post提交方式传参

                                         Layer.open()使用post提交方式传参

 

一、前言

       相信很多开发的小伙伴都常用 Layer控件 实现页面弹出框，具体方法：layer.open();

       在此总结几点心得，记录一下，分享给大家。

 

二、GET 提交方式

       当传递参数很多时，我们需通过get提交方式，将参数拼接在路径后，如下代码所示：

       大家都知道，对于不同浏览器来说 get提交方式的URL是有长度限制的。

       所以，当传递参数很多时，这种方法是不适用的。

        layer.open({
            type: 2, // 这里为 2   0:信息框,默认 1:页面层 2:iframe层 3:加载层 4:tips层
            title: '猿医生',
            skin: 'layui-layer-rim',
            area : ['800px', '500px'], // 可为百分比
            content: '/url/yys?param1='+param1+'¶m2='+param2+'¶m3='
                    +param3+'¶m4='+param4+'¶m5='+param5+'¶m6='
                    +param6+    ...    '¶m(n-1)='+param(n-1)+'¶m(n)='+param(n)
        });

 

二、POST 提交方式

       首先，这里需明确一点，此 post非彼 post。

       再这里并不是使用的 layer.open()方法的 post提交方式，查看文档并没有找到此方法支持 post方式(或许是我没找到)；

       于是，巧妙地利用ajax实现了下，设计思路与实现步骤如下：

       【 设计思路】：

           首先我们知道 layer中 content属性，是支持写 html页面地址的，eg:(/yys/index.html)，从而通过页面地址跳转；

           所以，我们只需将传递参数提前传入html页面，生成完整的页面，直接放入 layer中 content属性即可；

       【 实现步骤】：

       1、通过 ajax的 post提交方式传递参数，这样即可解决get提交长度限制问题；

       2、获取参数并存入域中，返回页面(也就是视图)；

       3、最后将返回的页面地址存入 layer.open()方法的 content 的属性中，即可。

     ---方式一：  
           
           $.post('/url/yys',
		{
		    param1:param1,
                    param2:param2,
                    param3:param3,
                        ...
                    param(n-1):param(n-1),
                    param(n):param(n)
		},
		function (result) {
                   layer.open({
                       type: 1, // 这里为 1   0:信息框,默认 1:页面层 2:iframe层 3:加载层 4:tips层
                       title: '猿医生',
                       skin: 'layui-layer-rim',
                       area : ['800px', '500px'],
                       content:result // 将返回值(页面路径)存入此
                   });
           });


     ---方式二：

           $.ajax({
            type : "POST",
            url : "/url/yys",
            data : {
		    param1:param1,
                    param2:param2,
                    param3:param3,
                        ...
                    param(n-1):param(n-1),
                    param(n):param(n)
            },
            dataType: 'html', // html or text 都可以
            success : function(result) {
                layer.open({
                    type: 1, // 这里为 1   0:信息框,默认 1:页面层 2:iframe层 3:加载层 4:tips层
                    title: '猿医生',
                    skin: 'layui-layer-rim',
                    area : ['800px', '500px'],
                    content:result // 将返回值(页面路径)存入此
                });
            }
        });


     ---controller(代码只是演示)：

	@RequestMapping("/url/yys")
	public String toYys(HttpServletRequest request, HttpServletResponse response,ModelMap model) {
            try {
		request.setAttribute("param1", request.getParameter("param1"));
		request.setAttribute("param2", request.getParameter("param1"));
		request.setAttribute("param3", request.getParameter("param1"));
		request.setAttribute("param4", request.getParameter("param1"));
		                          ...  ...
		request.setAttribute("param(n-1)", request.getParameter("param(n-1)"));
		request.setAttribute("param(n)", request.getParameter("param(n)"));
		return "/yys/index";
	    } catch (Exception e) {
		e.printStackTrace();
		return ERROR;
	    }
	}

 

                       Now ~ ~ ~写到这里，就写完了，如果有幸帮助到你，请记得关注我，共同一起见证我们的成长。