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 相关文章推荐
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 Javascript
javascript拖曳互换div的位置实现示例
Jun 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
php计划任务之ignore_user_abort函数实现方法
2015/01/08 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
javascript Prototype 对象扩展
2009/05/15 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
Python之文字转图片方法
2018/05/10 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
python实现滑雪游戏
2020/02/22 Python
浅析matlab中imadjust函数
2020/02/27 Python
django实现模型字段动态choice的操作
2020/04/01 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
简历中求职的个人自我评价
2013/12/03 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
青年文明号服务承诺
2014/03/31 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
学校就业保障协议书
2019/06/24 职场文书
Nginx快速入门教程
2021/03/31 Servers