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四种调用模式和this示例介绍
Jan 02 Javascript
jquery实现submit提交表单
Feb 03 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 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
延长phpmyadmin登录时间的方法
2011/02/06 PHP
php中批量替换文件名的实现代码
2011/07/20 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
2019/05/08 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
Python编程入门的一些基本知识
2015/05/13 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
python实现排序算法解析
2018/09/08 Python
python实现文本界面网络聊天室
2018/12/12 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
Keras loss函数剖析
2020/07/06 Python
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
abstract class和interface有什么区别?
2012/01/03 面试题
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
对公司合理化的建议书
2014/03/12 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis