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 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
解决vue-cli创建项目的loader问题
Mar 13 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 Javascript
原生JS实现天气预报
Jun 16 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 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文件读写操作之文件读取方法详解
2011/01/13 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
php DES加密算法实例分析
2019/09/18 PHP
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
python装饰器练习题及答案
2019/11/01 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
关于python中导入文件到list的问题
2020/10/31 Python
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
网游商务专员求职信
2013/10/15 职场文书
机械系大学毕业生推荐信
2013/11/27 职场文书
医学院校毕业生自荐信范文
2014/01/01 职场文书
2014年创卫工作总结
2014/11/24 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
python flappy bird小游戏分步实现流程
2022/02/15 Python
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server
Python  lambda匿名函数和三元运算符
2022/04/19 Python