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 相关文章推荐
JS学习之一个简易的日历控件
Mar 24 Javascript
JS通过相同的name进行表格求和代码
Aug 18 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
JavaScript简单编程实例学习
Feb 14 Javascript
vant实现购物车功能
Jun 29 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 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下打开URL地址的几种方法小结
2010/05/16 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
Vue表单实例代码
2016/09/05 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python实现pdf文档转txt的方法示例
2018/01/19 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
Django web框架使用url path name详解
2019/04/29 Python
通过实例学习Python Excel操作
2020/01/06 Python
python中有函数重载吗
2020/05/28 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
业务助理岗位职责
2013/11/18 职场文书
机电一体化专业应届生求职信
2013/11/27 职场文书
学校志愿者活动总结
2014/06/27 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
大客户经理岗位职责
2015/04/09 职场文书
公司人事任命通知
2015/04/20 职场文书
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers