精华内容
下载资源
问答
  • 今天小编就为大家分享一篇解决Layui 表单提交数据为空的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui表单提交到后台自动封装到实体类的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui表单提交

    千次阅读 2019-07-04 15:43:52
    layui标准的提交 <form class="layui-form" action=""> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-f...

    layui标准的提交

    
    <form class="layui-form" action="">
    
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            </div>
        </div>
     </form>
    <script>
        //Demo
        layui.use('form', function(){
            var form = layui.form;
            //监听提交
            form.on('submit(formDemo)', function(data){
                $.post(
                    "getArrange",
                    $(data.form).serialize(),
                    function (obj) {
                        if (obj.code == 1) {
                            layer.msg(obj.msg, {time: 1500}, function () {
                                window.location.href = 'arrange_remove';
                            });
                        }
                        else {
                     
    展开全文
  • 今天小编就为大家分享一篇防止Layui form表单重复提交的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • //提交表单 function formSubmit(obj){ dictType1 = $('#dictName option:selected').val(); console.log(dictType1) $.ajax({ type: "POST", data: $.param({'dictType':dictType,'dictName':dictType1})+'&...

     HTML页

    <label class="layui-form-label" style="width: 90px;">字典名称</label>
                        <div class="layui-input-inline">
                            <select name="dictName" id="dictName" lay-filter="dictName">
                                <option value=""></option>
                            </select>
                        </div>

     
    js代码

    //检查项目添加到下拉框中
            $.ajax({
                url: '/dic/getDictionaryTree',
                dataType: 'json',
                type: 'get',
                success: function (data) {
                    $.each(data, function (index, item) {
                        $('#dictName').append(new Option(item.dictName, item.id));// 下拉菜单里添加元素
                    });
                    layui.form.render("select");//重新渲染 固定写法
                }
            })
    //提交表单
    function formSubmit(obj){
        dictType1 = $('#dictName option:selected').val();
        console.log(dictType1)
        $.ajax({
            type: "POST",
            data: $.param({'dictType':dictType,'dictName':dictType1})+'&'+$("#dicListForm").serialize(),
            url: "/dic/setDict",
            success: function (data) {
                if (data.code == 1) {
                    layer.alert(data.msg,function(){
                        layer.closeAll();
                        load();
                    });
                } else {
                    layer.alert(data.msg);
                }
            },
            error: function () {
                layer.alert("操作请求错误,请您稍后再试",function(){
                    layer.closeAll();
                    //加载load方法
                    load();//自定义
                });
            }
        });
    }

     效果如下:

     

    展开全文
  • Layui表单提交问题

    2021-01-30 17:31:35
    1、Layui的form表单提交问题 ​ 在提交表单数据时,提交按钮为 submit 类型,以layui为js框架时,会重复提交表单数据。如何解觉这一问题?以下给出我认为便捷的三种方法: 设置button的type=button,否则默认...

    踩过的坑

    1、Layui的form表单提交问题

    ​ 在提交表单数据时,提交按钮为 submit 类型,以layui为js框架时,会重复提交表单数据。如何解觉这一问题?以下给出我认为便捷的三种方法:

    • 设置button的type=button,否则默认submit,就会重复提交

    • 在监听提交的form.on里加上return flase

      form.on("submit(formDemo)",function(data){
        	//do something
        	return false; 
       }); 
      
    • 把button移出form表单

    2、JQuery的ajax中data提交方式

    ​ 在提交表单数据时,data通常使用键值对的方式提交数据。如

    form.on('submit(formDemo)', function(data){
      $.ajax({
       	//...
        data:{
          uid:data.field.uid,
          password:data.field.password,
        },
      	//...
      });
      return false; //防止表单的重复提交
    });
    

    ​ 但是如果遇到大量键值对,这样的方式不免繁琐。在此百度之后,总结出两种便捷提交方式:

    • 直接传data.field

      form.on('submit(formDemo)', function(data){
        $.ajax({
         	//...
          data:data.field,
        	//...
        });
        return false; //防止表单的重复提交
      });
      
    • 利用formdata对象

      form.on('submit(formDemo)', function(data){
        var fd = new FormData(document.querySelector("form"));
        $.ajax({
         	//...
          data:fd,
          processData: false, //重要
          contentType: false, //重要
        	//...
        });
        return false; //防止表单的重复提交
      });
      

    后端接收数据

     $data=Request::post(); //['key'=>'value',...]多个键值对的形式
    

    至于为什么要加 processData: false和contentType: false, 这里给出查到的解释:


    对于contentType参数,发起http请求时设置的请求头中的contentType。jQuery.ajax()默认的值为:'application/x-www-form-urlencoded; charset=UTF-8',这个在大多数情况下都是适用的。

    但经过测试,保持默认时会报错,因为发送的数据中有input type=“file”(上传文件),那么这时contentType应该设置为’multipart/form-data’,但如果指定为这个类型服务端(php)就会报这个错误: Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0 。具体原因现在还不清楚,所以这里先将contentType设置为false,即不让jQuery设置contentType。
    processData参数,根据jQuery.ajax()文档中的解释,默认情况下,jQuery会处理发送的数据,将数据按照'application/x-www-form-urlencoded'的要求转换为查询字符串,如果要发送的数据是DOMDocument或者不需要处理,就可以设置为false不让jQuery转换数据,我们这里要发送的数据其实就是DOMDocument。

    经过测试,如果保持默认(true)的话,在发起请求前js会报错: TypeError: ‘append’ called on an object that does not implement interface FormData.

    另外还有个dataType参数,期望从服务器中返回的数据格式,这里最好也不要指定,而是让jquery自己根据http响应头中的contentType判断,然后返回一个合适的数据类型。指定后不会影响后台程序的逻辑处理,但你在前端接收的数据很可能不是期望的数据,于是js就会报这一类错误: SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data ,这个是将dataType指定为json后报的错误。

    原文链接


    3、thinkPHP文件上传

    文件上传是个大坑,这点我专门写了另外一篇

    4、TP6自带分页

    TP6自带分页官方文档写得比较详细,用起来也较为简单,挂个链接

    ​美中不足的是,TP6默认采用BootStrap渲染,我们需要自己修改样式。如何修改?参考另一篇

    展开全文
  • layui表单提交刷新问题 在提交监听结尾,添加一行return false

    layui表单提交刷新问题

    在提交监听结尾,添加一行return false

    展开全文
  • layui表单提交后刷新页面问题

    千次阅读 2020-05-15 15:44:04
    鄙人在测试页面表单提交的时候发现有时候点击提交按钮,第一次提交会验证必填项,但是再次点击页面会刷新,但是内容并没有提交后台,导致页面没有内容,白填写,最后经过鄙人一步步的测试发现是一个自己写的js中表单...
  • 今天小编就为大家分享一篇layui form表单提交之后重新加载数据表格的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui表单提交无反应

    2020-11-27 16:32:43
    点击submit时,form.on不被处罚,表单输入框验证项的验证不执行。...//监听提交 form.on('submit(demo1)', function(data){ //save(data); return false; }); 解决办法: 给submit按钮增加 lay-submit="" 即可。
  • 今天小编就为大家分享一篇layui表单提交以及验证和修改弹框的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui实现form表单同时提交数据和文件的代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui表单提交禁止表单跳转也会自动刷新 代码. //创建一个编辑器 提交监听 var editIndex = layedit.build('LAY_demo_editor'); //监听提交 form.on('submit(demo1)', function(data){ var url...
  • 提交表单,没有走ajax,直接提交表单页面。 原因是因为JQuery未引入 解决办法。引入JQuery或者使用layui自带Jquery var $ = layui.jquery; 也可以直接引入官方的Jquery来和平常一样使用 <script type="text/...
  • layui表单提交到后台

    万次阅读 2018-10-17 22:57:57
    思路:我在开发问卷调查模块时,想添加问卷的时候使用layui弹出一个表单,然后经过校验提交到ssm下的Controller里 一:jsp要弹出的表单 &lt;button id="add" class="layui-btn layui-btn-sm"...
  • layui表单提交前数据检验

    千次阅读 2019-02-12 15:23:20
    layui自带了一些简单的数据检验,lay-verify,如: &lt;form&gt; &lt;input type="text" name="operatMoney" class="layui-input" lay-verify="required|number&...
  • layui表单提交400

    2019-12-25 21:45:35
    ​{city: "123123"​,name: "12312",phoneNum: "312312","role": "1"sex: "0"} 后台使用user对象进行介绍,user熟悉city,name,phoneNum,role对象->id,name, 解决方案: 将前端name为role的改为role.name ...
  • 效果图(下图为目录,各个用法都有了) 效果1 详细见下方博客: https://www.cnblogs.com/caicaizi/p/69636_1.html https://www.cnblogs.com/caicaizi/p/69636_2.html
  • LayUI表单提交数据为空

    万次阅读 2018-03-27 09:55:20
    今天踩了个坑,就是使用layui表单提交时,提交的数据为空。 例如,layer.msg(JSON.stringify(data.field));这句代码执行后,页面显示为空对象。 &amp;lt;form class=&quot;layui-form&quot; action=&...
  • layui表单提交没成功也会重新刷新表单,layui bug 在form.on最后添加return false;就可以了,如下图
  • layui表单提交时,只有一条数据问题解决 用一个layui做一个表单模块时,想弄一个点击后提交按钮后,弹出提交内容的提示框 图片中的红框内容就是将提交的内容弹出语句 问题就是:点击提交表单按钮后,确实有弹出提示...
  • layui表单提交封装

    2019-09-30 18:44:13
    /** * 表单提交 * @param formId * @param submitForm_success * @return */function submitForm(formId,submitForm_success){ layui.use('form', function(){ var form = layui.form; //监听提交ajaxSubmit...
  • 1、提交表单,页面自动刷新。 出现这样的情况呢,搜索了一下是因为表单提交按钮没有type类型
  • 后台接收页面表单的方式一般来说有两种(ssm来说,我这里用的是Jfinal,类似), 一种是以成员变量的方式接收 另一种是以对象的方式接收 成员变量接收:控制器中方法的形参必须和页面name中的值一样(Jfinal类似,...
  • 最近在使用Layui做项目的时候使用layui表单功能进行ajax和后台进行数据交互(项目中使用了同步加载),在点击提交后,需要跳转到另一页面,但实际ajax的success后书写window.location.href后并未成功跳转。...
  • 我在做登陆表单提交,遇到2个问题 1,在IE9上始终出现刷新登陆页面问题 解决办法:加一个return false //登录按钮 form.on("submit(login)", function (data) { $(this).text("登录中...").attr("disabled...

空空如也

空空如也

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

layui表单提交