思路:我在开发问卷调查模块时，想添加问卷的时候使用layui弹出一个表单,然后经过校验提交到ssm下的Controller里

一：jsp要弹出的表单

<button id="add" class="layui-btn layui-btn-sm">添加问卷</button>

 <div class="layui-row" id="test" style="display: none;">

            <div class="layui-col-md10">

                <form class="layui-form" action="" method="post" id="addEmployeeForm">

                    <div class="layui-form-item">

                        <label class="layui-form-label" style="padding-left:-50px;">问卷标题:</label>

                        <div class="layui-input-block">

                            <input type="text" placeholder="请输入问卷名称" lay-verify="questionnaireName" name="questionnaireName" id="questionnaireName" class="layui-input">

                        </div>

                    </div>

                  

                    <div class="layui-form-item">

                        <div class="layui-input-block">

                            <button lay-submit="" lay-filter="suu" class="layui-btn layui-btn-normal tijiao">提交</button>

                        </div>

                    </div> 

                </form>

            </div>

        </div>

二：layui脚本

layui.use(['layer','form'],function(){

    var form=layui.form;

    var layer=layui.layer;

    $=layui.jquery;

 

$("#add").on('click',function(){

          layer.open({

              type:1,

              title:"添加问卷",

              skin:"myclass",//自定样式

              area:["400px","250px"],

              content:$("#test").html(),

             

              success: function(layero, index){},

              yes:function(){

              }

          });

           form.render();//动态渲染

         }); 

         form.verify({

    questionnaireName: function(value){

  if(value.length < 5){        

      return '标题至少得5个字符啊';    

      }        

  }     

    });     

    form.on('submit(suu)', function(data){ 

            $.ajax({   

                url:'./add',       

                method:'post',       

                data:data.field,        

                dataType:'JSON',         

                success:function(res){       

                     if(res.code='0'){       

                        parent.closeIframe(res.msg);

                        }                

                    else            

                        alert(res.msg);   

                    },              

                    error:function (data) {

                        

                    }           

                    }) ;         

                

            });   

 });

 

三：ajax发出的请求访问Controller

 @RequestMapping("/addQuestionaire")

    @ResponseBody

    public ModelAndView addQuestionnaire(HttpServletRequest request)throws Exception {

           Questionnaire questionnaire=new Questionnaire();

           questionnaire.setQuestionnaireName(request.getParameter("questionnaireName"));

           String nowTime=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date());

           questionnaire.setTime(Timestamp.valueOf(nowTime));    

           questionnaireService.insert(questionnaire);

            System.out.println(questionnaire.getTime());

            System.out.println("添加成功！");

            return new ModelAndView("redirect:/questionnaire/QuestionnairePage");//返回到分页查询的requestMapping;

    }

四:效果图





也可以参考另一篇博客，https://blog.csdn.net/liqz666/article/details/83508260，后台接收layui表单传来的数据

在SpringBoot项目上用layui前端框架，由于之前使用的是JSP页面，我就讲layui.js的一些结构都拿过来了，谁知道运行访问页面直接报错



 

网上查了一下才知道，[[…]]之间的表达式在Thymeleaf被认为是内联表达式，解决方式很简单cols的后面的两个中括号换行就可以了。

1，后台数据库的增删改查操作在jsp页面里的layui.use方法下的所有函数不能用alert("")来测试问题。

2，在$.ajax（{}）中的某些sql语句的跳转无法触发动作时，且没有语法错误。检查layui的use里是否写全了赋值的参数，常见的有['form','jquery','upload','layedit','laydate']等等。如果没有补全，有时.ajax是失效的。

3，layui 中input  d的样式：div class="layui-input-inline"> 与 <div class="layui-input-block">最好不要放置同一个 <div class="layui-form-item">下面

4，layui 编辑菜单中$出现错误，则直接会影响前端界面的渲染（按钮不会显示!）

5，layui 中如果$.ajax({}) 有类属性值获取不到时，哪怕语句是被注释掉了，也会报：类似Property 'item_category_id1' not found on type com.huiyou.domain.Mall_item_category的错误。

5，layui 在table.render({}) 渲染表格中，不能采用 if ....else if ....else if ...else结构，可以采用switch结构来代替。。

在jsp页面中使用到了layui里的分页，本来是异步刷新，但是这里因为直接返回的是model，所以这里layui里的curr参数是后台直接传过来的，而且这里得curr参数在刚开始写得时候，要注意根据当前页码来改变其大小，否则这里很容易出现一直为第一页的BUG。
// 分页
layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage,
  	  layer = layui.layer;
//自定义首页、尾页、上一页、下一页文本
  laypage.render({
    elem: 'demo3'
    ,count: ${pagehelper.total}    // 总数
    ,first: '首页'
    ,last: '尾页'
    ,limit: ${pagehelper.pageSize}   // 一页显示多少行
    ,curr: ${pagehelper.pageNum}     // 当前页码
    ,layout: ['count','prev','page','next','limit','skip']  // 要显示的组件
  	,jump: function (obj, first) {    // 在里面写调用方法。
  		console.log(this.curr); //得到当前页，以便向服务端请求对应页的数据。
  		this.curr = obj.curr;
  		this.limit = obj.limit;
  		if (!first) {
  			// 不是首页时调用的方法
  		}
  	}
  });
})