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 Array Flatten 与递归使用介绍
Oct 30 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 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
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
jquery等待效果示例
2014/05/01 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
js中less常用的方法小结
2017/08/09 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
Python写入CSV文件的方法
2015/07/08 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
python Opencv将图片转为字符画
2021/02/19 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
大学团支书的自我评价分享
2013/12/14 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
十月围城观后感
2015/06/08 职场文书
MySQL基础(一)
2021/04/05 MySQL
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript
ipad隐藏软件app图标方法
2022/04/19 数码科技