精华内容
下载资源
问答
  • 今天小编就为大家分享一篇layui使用form表单实现post请求页面跳转的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui使用form表单实现post请求,避免信息泄露(设置form表单隐藏,也可以初始化时隐藏):这里是在数据表格查询数据时的按钮操作,其他操作类似<table id="myTable" class="layui-table" ...

    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请求,避免信息泄露(设置form表单隐藏,也可以初始化时隐藏):这里是在数据表格查询数据时的按钮操作,其他操作类似数据表格具体配置查看layui文档详情下面action部分可以是具体的请求路径...

    如下所示:

    window.location.href='url?param=' + paramValue;

    上面这种方式实现页面跳转附带参数,容易造成信息泄露;

    layui使用form表单实现post请求,避免信息泄露(设置form表单隐藏,也可以初始化时隐藏):

    这里是在数据表格查询数据时的按钮操作,其他操作类似

    数据表格具体配置查看layui文档

    详情

    下面action部分可以是具体的请求路径,亦可以使*.do请求

    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请求页面跳转的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

    时间: 2019-09-14

    展开全文
  • layui ajax请求示例

    万次阅读 2018-08-06 10:15:16
    加载js &amp;amp;amp;lt;script&amp;amp;amp;gt; layui.config({ base : &amp;amp;quot;/Public/plug/layui/extend/&amp;amp;quot; //address.js的路径 }).use([ 'layer', '...,'form'], fun

    加载js

    //需要引入第三方类库 如address.js
    <script>
        layui.config({
            base : "/Public/plug/layui/extend/" //address.js的路径
        }).use([ 'layer', 'jquery', "address",'form'], function() {
            var layer = layui.layer, $ = layui.jquery, address = layui.address(),form = layui.form;
            form.render();
        });
    </script>
    //不需要引入其他js
    <script>
        layui.use(['layer','form'], function() {
            var $ = layui.jquery,form = layui.form;
            form.render();
        });
    </script>

    confirm对话框

    $('.quit').click(function(){
          var openid = $(this).attr('data');
          var url = "{:U('Company/peopleQuit')}";
          var o = $(this);
          if(o.hasClass('layui-btn-disabled')){
              layer.msg('正在执行。。。',{icon: 5});//失败的表情
              return;
          }else{
              o.addClass('layui-btn-disabled');
          }
          layer.confirm('确定取消他的资格吗?', {
              icon: 3,
              skin: 'layer-ext-moon',
              btn: ['确认','返回'] ,//按钮
              btn2:function(){
                  o.removeClass('layui-btn-disabled');
              }
          }, function(){
              $.ajax({
                  url:url,
                  type:'post',
                  data:{openid:openid},
                  beforeSend:function () {
                      this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
                  },
                  success:function(data){
                      if(data.status == 'error'){
                          layer.msg(data.msg,{icon: 5});//失败的表情
                          o.removeClass('layui-btn-disabled');
                          return;
                      }else{
                          layer.msg(data.msg, {
                              icon: 6,//成功的表情
                              time: 1000 //1秒关闭(如果不配置,默认是3秒)
                          }, function(){
                              location.reload();
                          });
                      }
                  },
                  complete: function () {
                      layer.close(this.layerIndex);
                  },
              });
          });
      });

    弹框操作

    //审核
    $('.audit').click(function(){
        var openid = $(this).attr('data');
        var url = "{:U('Company/peopleAudit')}";
        $.get(url,{openid:openid},function(data){
            if(data.status == 'error'){
                layer.msg(data.msg,{icon: 5});
                return;
            }
            layer.open({
                title:'审核',
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                area: ['800px','600px'], //宽高
                content: data,
            });
        })
    });

    监听表单提交

    form.render();
    form.on('submit(add)', function(data){
        var userInfo = data.field;
        var url = "{:U('Maintenance/companyAdd')}";
        $.ajax({
            url:url,
            type:'post',
            data:userInfo,
            beforeSend:function () {
                this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
            },
            success:function(data){
                if(data.status == 'error'){
                    layer.msg(data.msg,{icon: 5});//失败的表情
                    return;
                }else if(data.status == 'success'){
                    layer.msg(data.msg, {
                        icon: 6,//成功的表情
                        time: 1000 //1秒关闭(如果不配置,默认是3秒)
                    }, function(){
                        location.reload();
                    });
                }
            },
            complete: function () {
                layer.close(this.layerIndex);
            },
        });
        return false;//阻止表单跳转
    });
    展开全文
  • layui发送请求到后端的方法

    千次阅读 2020-04-01 15:18:55
    一、post请求 <script type="text/javascript"> layui.use([ 'element', 'jquery', 'laydate', 'form'],function() { var $ = layui.jquery; var element = layui.element; var laydate = layui....

    一、post请求

    <script type="text/javascript">
    		layui.use([ 'element', 'jquery', 'laydate', 'form'],function() {
    			var $ = layui.jquery;
    			var element = layui.element;
    			var laydate = layui.laydate;
    			var form = layui.form;
    			//监听提交事件
    			form.on('submit(demo1)', function(data){				    $.post("/user/changePwd",data.field,function(res){
    						if(res.code==200){	
    							layer.msg("修改成功");
    						}else{
    							layer.msg("修改失败");
    						}						
    					})										  					  
    				return false;  //阻止表单跳转。如果需要表单跳转,去掉这段即可。
    			   });
    	</script>
    

    二、ajax请求

    <script type="text/javascript">
    		layui.use([ 'element', 'jquery', 'laydate', 'form'],function() {
    			var $ = layui.jquery;
    			var element = layui.element;
    			var laydate = layui.laydate;
    			var form = layui.form;
    			//监听提交事件
    			form.on('submit(demo1)', function(data){
    				  //获取请求数据
    				  var oldPwd = data.field.oldPwd;
    				  var newPwd = data.field.newPwd;
    				  var confirmPwd = data.field.confirmPwd; 		  
    				  //使用ajax发送请求
    				  $.ajax({
    					  url:"/user/changePwd",
    					  type:"post",
    					  data:data.field,
    					  dataType:"json",
    					  success:function(data){						 
    					  }				  				  
    				  }); 				 									  			  
    				return false;  //阻止表单跳转。如果需要表单跳转,去掉这段即可。
    			   });																				    
    		});
    	</script>
    
    展开全文
  • 今天给大家介绍的是当下很流行的框架layui中的一个小案例、就是form表单监控提交并且使用ajax异步提交验证数据。在layui中我们想使用哪个模块就要layui.use('form',function{});这种形式要引用form内置模板,下面是...
  • 效果图 加载使用 <script type="text/javascript" src="jquery.js"></script>...script type="text/javascript" src="jquery....form id="formDemo" class="layui-form"> <table class="layui-.
  • layui Ajax请求给下拉框赋值

    万次阅读 2018-01-26 14:27:54
    ,form = layui.form; var $ = layui.jquery, layer = layui.layer; var tableIns = table.render({ elem: '#infoTable' ,url: '/web/courseArrange/list' ,id: 'idTable' ,page: true ,...
  • layui form表达提交get改变post

    千次阅读 2019-12-12 18:01:27
    公司最近在做layui的ui框架,遇到添加信息的时候form表单一直以get方式提交,就是将参数拼接在url后面,一般的都没问题,但是如果遇到参数内容过多等就会遇到413代码问题。 针对这个问题,layui默认form提交方式是...
  • layui渲染form表单

    千次阅读 2019-08-28 10:08:00
    有时ajax请求的数据返回时,页面已经加载了,此时就无法展示ajax加载的...var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功 form.render(); }); 即可 $(function () { queryPerson...
  • layui table 增加where条件后出现415 unsupported media type解决办法:在table.js源码中修改,传输参数会附件分页信息修改data:JSON.stringify(t.extend(c,n.where)),添加contentType: "application/json"...
  • layui发送ajax请求

    2021-07-25 19:16:36
    form class="layui-form" action="" lay-filter="form-group"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">xxx</label> <div ...
  • 2、LayuiResponseData类(layui表格数据格式封装) package com.ysm.util; import java.util.List; /** * layui表格数据格式 * @author admin * */ public class LayuiResponseData { //响应码 数据总数 ...
  • author:咔咔 ...现在就暴露了问题,比如我现在添加一个电视剧,返回来之后应该是电视剧,但是返回来是直接到电影的,因为post请求参数是没有在地址后边的,所有会直接返回到相当于初始页面 所以...
  • 点击签到按钮,获取表格复选框选中信息,并js处理信息获取ids数组,通过post把ids数组传到后台并进行页面跳转。 签到按钮 <button class="layui-btn layui-btn-normal f-left " lay-submit lay-filter="sign" &...
  • layui form表单ajax提交

    2020-02-08 17:33:04
    <form class="layui-form" method="post" action=""> <div class="layui-form-item"> <label class="layui-form-label">账号</label> ...
  • @PostMapping("/transfer") public String transfer(@RequestParam("bankCardNo") Integer bankCardNo, @RequestParam("bankCardPassword") Integer bankCardPassword, @RequestParam("phoneNumber") Integer phone...
  • &amp;amp;lt;script src=&amp;quot;/node_modules/layui-src/dist/layui.all.js&amp;quot;&amp;amp;gt;&amp;amp;lt;/script&... var layer = layui.layer;... var form = layu
  • Layui】ajax请求

    千次阅读 2018-12-12 20:14:57
    author:咔咔 wechat:fangkangfk //监听提交按钮 form.on('submit(formSubmit)', function(data){ $.post("{:url('video_type/editInfo')}",data.field,function(r){ if(r.code=...
  • 主要问题:使用layuiform组件用ajax提交表单发送请求时,总是无法收到回调函数,success与error中的回调均不执行,且该表单会自动刷新。 解决办法:在提交表单的方法form.on()中添加return false,以防止表单自动...
  • layui form ajax提交失败的解决方法

    千次阅读 2018-05-04 14:53:02
    最近在使用layuiform表单的时候遇到一个奇怪的问题 就是ajax无法使用具体表现为 网络请求没有ajax的请求信息 form直接提交了 设置了 return false 也无反应 去掉ajax代码之后 return false 能阻止表单提交 解决...
  • layui使用官方的表单模块form.on('submit(sub)',function (){}) 提交,使用ajax请求向后台请求一个执行结果,根据结果进行处理,出现回调无法执行,并且页面出现了刷新 之前也遇到过这个问题,直接使用将form标签...
  • form class="layui-form" style="margin-top: 50px;"> <div class="layui-form-item"> <label class="layui-form-label">上级</label> <div class="layui-input-block"> <sele
  • 使用layui-form表单ajax传输问题

    千次阅读 2018-09-25 18:00:12
    1、提交表单一直返回原页面并且在url上多一个?...解决办法:脚本前加上var $ = layui.jquery; 另外 要把ajax里面的dataType给注释掉。   看来layui还是有很多坑啊,折腾了我好多时间  ...
  • layUI文件上传与form表单一起提交

    千次阅读 2019-11-07 10:10:39
    <%--<form class="layui-form layui-form-pane" style="margin-top: 15px;" lay-filter="addForm" enctype="multipart/form-data">--%> <div class="layui-form-item"> <div class="layui-input-inline"> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,254
精华内容 901
关键字:

layuipost请求form