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 02 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
openlayers4实现点动态扩散
Aug 17 Javascript
JavaScript实现瀑布流布局的3种方式
Dec 27 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
解决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
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
Express.JS使用详解
2014/07/17 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
python中的二维列表实例详解
2018/06/19 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
歌唱比赛获奖感言
2014/01/21 职场文书
一年级学生评语大全
2014/04/21 职场文书
好学生评语大全
2014/05/05 职场文书
社区戒毒工作方案
2014/06/04 职场文书
群教个人对照检查材料
2014/08/20 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
工程款催款函
2015/06/24 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python
java版 联机五子棋游戏
2022/05/04 Java/Android
mysql sock 文件解析及作用讲解
2022/07/15 MySQL