layui使用form表单实现post请求页面跳转的方法

更新时间：2019年09月14日 22:19:02 作者：HerbertXuTTT

今天小编就为大家分享一篇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定时保存表单数据的代码
我相信有不少TX用过QQ或163的邮箱吧？他们中有一个比较有用且有趣的功能，如果您在编写邮件，那在固定一个时间频率内，它会自动将您的邮件内容保存起来，以免丢失。
2011-03-03
js设置文字颜色的方法示例
这篇文章主要介绍了js设置文字颜色的方法,涉及JS页面元素样式操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2016-12-12
JS实现移动端按首字母检索城市列表附源码下载
我们常见的手机通讯录或微信通讯录，联系人信息是按字母顺序排列的列表，通过点击右侧的字母，会迅速定位检索到首字母对应的联系人。下面通过本文给大家分享JS实现移动端按首字母检索城市列表功能，需要的的朋友参考下吧
2017-07-07
微信小程序实现导航栏和内容上下联动功能代码
这篇文章主要介绍了微信小程序实现导航栏和内容上下联动功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-06-06
ES6 class的应用实例分析
这篇文章主要介绍了ES6 class的应用,结合实例形式分析了class在ES6面向对象程序设计中定义类的相关操作技巧,需要的朋友可以参考下
2019-06-06
js字符编码函数区别分析
js对文字编码有3个函数： escape,encodeURI,encodeURIComponent，对应的解码函数：unescape,decodeURI,decodeURIComponent
2008-06-06
将URL地址都变成ooooooooo的神奇小工具使用介绍
这篇文章主要为大家介绍了将URL地址都变成ooooooooo的神奇小工具使用介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
十个你必须要会的TypeScript技巧分享
学习Typescript通常是一个重新发现的过程。这篇文章为大家整理了十个你必须要会的TypeScript技巧，希望对大家学习TypeScript有所帮助
2023-06-06
验证用户是否修改过页面的数据的实现方法
在实现程序的修改模块时，要在页面端检查用户是否修改过数据，以便提醒用户及时保存修改后的数据。
2008-09-09
利用JavaScript实现静态图片局部流动效果
如果你有玩过《王者荣耀》、《阴阳师》等手游，一定注意到过它的启动动画、皮肤立绘卡片等场景，经常采用静态底图加局部液态流动效果的简单动画，本文将利用JavaScript实现这一效果，需要的可以参考一下
2022-08-08