layui使用form表单实现post请求页面跳转的方法
时间:2019-09-17
本文章向大家介绍layui使用form表单实现post请求页面跳转的方法,主要包括layui使用form表单实现post请求页面跳转的方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
如下所示:
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 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux环境ActiveMQ部署方法详解
- Ubuntu 16.04无法切换root权限问题的解决
- leetcode栈之用队列实现栈
- 在Linux上识别同样内容的文件详解
- Ubuntu下pycharm无法导入类的解决方法
- leetcode栈之最小栈
- Linux基础学习之利用tcpdump抓包实例代码
- Linux/Unix关于时间和时间戳的命令行
- git文件管理心得分享
- Linux如何实现断点续传文件功能
- Xshell实现Windows上传文件到Linux主机的方法
- Linux中的EXT系列文件系统格式详解
- Linux中hexdump命令用法
- CentOS7挂载新数据盘的完整步骤
- Linux下安装Keepalived及原理分析