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 判断数组是否已包含了某个元素的函数
May 30 Javascript
jQuery-ui中自动完成实现方法
Jun 10 Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 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 Document 代码注释规范
2009/04/13 PHP
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
yii用户注册表单验证实例
2015/12/26 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
Swift中的协议(protocol)学习教程
2016/07/08 Python
python 类详解及简单实例
2017/03/24 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
EM算法的python实现的方法步骤
2018/01/02 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
PHP面试题附答案
2015/11/28 面试题
学年自我鉴定
2014/01/16 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
党课主持词大全
2015/06/30 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python
python如何将mat文件转为png
2022/07/15 Python