layui使用form表单实现post请求页面跳转的方法


Posted in Javascript onSeptember 14, 2019

如下所示:

window.location.href='url?param=' + paramValue;

上面这种方式实现页面跳转附带参数,容易造成信息泄露;

layui使用form表单实现post请求,避免信息泄露(设置form表单隐藏,也可以初始化时隐藏):

这里是在数据表格查询数据时的按钮操作,其他操作类似

<table id="myTable" class="layui-table" lay-filter="myTableDetail" ></table>

数据表格具体配置查看layui文档

<script type="text/html" id="detailBar">
 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
</script>

下面action部分可以是具体的请求路径,亦可以使*.do请求

<form action='${basepath}/requestMethodName' method='post' name='form1' style='display:none'>

 <input type=hidden name='param1' id="param1" value=''>
 <input type=hidden name='param2' id="param1" value=''>
</form>

js部分:

table.on('tool(myTable)', function(obj){
   var data = obj.data; // 选中的单条数据信息,后台传过来的数据全部可以获取
   if(obj.event === 'detail'){ // 监听上面定义的按钮
    // layer.msg('ID:'+ data.ID+ ' 的查看操作');
    // 提交前设置提交数据,需要向后台传输的数据,
    $('#param1').prop("value", data.param1);
    $('#param2').prop("value", data.param2);
    document.form1.submit();
   } 
 });

以上这篇layui使用form表单实现post请求页面跳转的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
JavaScript 反射学习技巧
Oct 16 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 #Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 #Javascript
vue登录注册实例详解
Sep 14 #Javascript
javascript合并两个数组最简单的实现方法
Sep 14 #Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 #Javascript
Layui表格行工具事件与数据回填方法
Sep 13 #Javascript
layui使用表格渲染获取行数据的例子
Sep 13 #Javascript
You might like
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
python如何实现excel数据添加到mongodb
2015/07/30 Python
wxpython实现图书管理系统
2018/03/12 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
详解python 中in 的 用法
2019/12/12 Python
python3.8下载及安装步骤详解
2020/01/15 Python
Python实现代码块儿折叠
2020/04/15 Python
Pycharm修改python路径过程图解
2020/05/22 Python
python退出循环的方法
2020/06/18 Python
Python 串口通信的实现
2020/09/29 Python
python中pop()函数的语法与实例
2020/12/01 Python
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
个人现实表现材料
2014/02/04 职场文书
红色故事演讲稿
2014/05/22 职场文书
调研汇报材料范文
2014/08/17 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
商场收银员岗位职责
2015/04/07 职场文书
邹越演讲观后感
2015/06/15 职场文书
一年级语文教学随笔
2015/08/14 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python