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请求页面跳转的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
layui自己添加图片按钮并点击跳转页面的例子
1.按钮样式 <table class="layui-hide" id="test" lay-filter="menu-filter" style="margin: 0 10px;"></table> <script type="text/html" id="toolbtn"> <a class="" lay-event=&q
-
layui.js实现的表单验证功能示例
本文实例讲述了layui.js实现的表单验证功能.分享给大家供大家参考,具体如下: 该示例可针对文本框,手机,邮箱,textarea等格式进行验证 首先引入如下文件: <script src="layui/layui.js"></script> <script src="layui/lay/dest/layui.all.js"></script> <link rel="stylesheet"
-
解决layer弹出层的内容页点击按钮跳转到新的页面问题
在参与的一个项目中,有一个这样的需求,导入基础数据成功后,默认弹出一个管理员登录页,点击登录按钮,需要跳到管理页面. 导入页按钮: <button type="button" id="start" class="layui-btn layui-btn-radius layui-btn-lg layui-bg-orange btn3"><i>导入</i></button> 导入按钮的点击事件,点击后会
-
layui使用form表单实现post请求页面跳转的方法
如下所示: window.location.href='url?param=' + paramValue; 上面这种方式实现页面跳转附带参数,容易造成信息泄露: layui使用form表单实现post请求,避免信息泄露(设置form表单隐藏,也可以初始化时隐藏): 这里是在数据表格查询数据时的按钮操作,其他操作类似 <table id="myTable" class="layui-table" lay-filter="myTableDetail&qu
-
layui在form表单页面通过Validform加入简单验证的方法
form简单验证 <input type="text" name="email" datatype="e" ignore="ignore" placeholder="请输入邮箱" autocomplete="off" class="layui-input"> datatype="e"验证邮箱 ignore="ignore&qu
-
layui lay-verify form表单自定义验证规则详解
官方文档详见:https://www.layui.com/doc/modules/form.html#verify 虽然layui的官方文档已经是写的比较详细,但是初次使用的时候总会懵一下,这里纪录一下lay-verify自定义验证规则的时候到底放哪. html: <input type="text" lay-verify="digital" placeholder="请输入数字"> <button type="but
-
layui实现form表单同时提交数据和文件的代码
1.jsp页面 ·html代码 <%--用户注册的弹出框--%> <div id="userDiv" style="display: none;"> <form class="layui-form" id="userForm" lay-filter="deptForm" enctype="mutipart/form-data"> <input t
-
vue form 表单提交后刷新页面的方法
最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中 定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数据 this.$http.get("/permit/specific", { params: { page: this.localPage, size: this.msg.pagNumber, } }, {emulateJSON: true} ).then((response) =>
-
动态设置form表单的action属性的值的简单方法
用jQuery时,可如下设置: form表单: <form name="myform" id="myform" action="ssss" method="post" onsubmit="getUrl();"> javascript方法: <script type="text/javascript"> function getUrl(){ $('form').at
-
解决layui中的form表单与button的点击事件冲突问题
layui的form表单位置和button标签的位置重合,会使得button的click事件得不到响应,如图: 蓝色底为form的位置,"重新搜索"为<button>标签的位置,此时,button标签的click事件无法响应. 必须将form的宽度减小,到不和button标签重合 如下图: 此时按钮正常响应click 以上这篇解决layui中的form表单与button的点击事件冲突问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
Vue form 表单提交+ajax异步请求+分页效果
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="UTF-
-
js 提交form表单和设置form表单请求路径的实现方法
如下所示: form表单ID:postform 设置表单请求url document.postform.action = "SaveReturnInfo"; 提交form表单 document.getElementById("postform").submit(); 以上就是小编为大家带来的js 提交form表单和设置form表单请求路径的实现方法全部内容了,希望大家多多支持我们~
-
在layui中使用form表单监听ajax异步验证注册的实例
今天给大家介绍的是当下很流行的框架layui中的一个小案例.就是form表单监控提交并且使用ajax异步提交验证数据.在layui中我们想使用哪个模块就要layui.use('form',function{});这种形式要引用form内置模板,下面是HTML全部代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>注册</title> <
随机推荐
- Java实现mybatis批量插入数据到Oracle
- Vue2学习笔记之请求数据交互vue-resource
- AngularJS进行性能调优的7个建议
- 鼠标移到导航当前位置的LI变色处于选中状态
- Java8新特性之字符串去重介绍
- iOS获取手机通讯录方式方法(最新)
- jQuery DataTables插件自定义Ajax分页实例解析
- 在Form_Load里面调用Focus无效的解决方法
- 详解C++中的inline用法
- 深入理解JavaScript定时机制
- log引起的mysql不能启动的解决方法
- Android Dialog 设置字体大小的具体方法
- PHP提交表单失败后如何保留已经填写的信息
- js实现的仿Photoshop鼠标滚轮控制输入框取值(修正兼容Chrome)
- 空格或者空白字符导致$.ajax()报parseerror错误小结
- 查找sqlserver查询死锁源头的方法 sqlserver死锁监控
- SQLServer 镜像功能完全实现
- 一个支付页面DEMO附截图
- alert中断settimeout计时功能
- 妙招防止非法入侵Win2000/XP系统