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 相关文章推荐
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
Nov 23 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 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
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
javascript 贪吃蛇实现代码
2008/11/22 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
jquery自定义组件实例详解
2020/12/31 jQuery
Python编写检测数据库SA用户的方法
2014/07/11 Python
Python3写入文件常用方法实例分析
2015/05/22 Python
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
关于Python-faker的函数效果一览
2019/11/28 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
访谈节目策划方案
2014/05/15 职场文书
2015年个人思想总结
2015/03/09 职场文书
小学生手册家长意见
2015/06/03 职场文书
合作合同协议书
2016/03/21 职场文书
Java 数据结构七大排序使用分析
2022/04/02 Java/Android