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 20 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
php+js实现倒计时功能
Jun 02 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
node后端服务保活的实现
Nov 10 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
解决antd Form 表单校验方法无响应的问题
Oct 27 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
vue实现自定义多选按钮
2020/07/16 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
Python作用域用法实例详解
2016/03/15 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
Python如何输出百分比
2020/07/31 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
Exception类的常用方法
2012/06/16 面试题
大学四年学习的自我评价分享
2013/12/09 职场文书
美发店5.1活动方案
2014/01/24 职场文书
写求职信有什么意义
2014/02/17 职场文书
高中语文课后反思
2014/04/27 职场文书
学风建设演讲稿
2014/09/12 职场文书
学校重阳节活动总结
2015/03/24 职场文书
mysql 子查询的使用
2022/04/28 MySQL
Java实现带图形界面的聊天程序
2022/06/10 Java/Android