layui表单提交到后台

拼搏现实的明天。 2021-09-22 14:32 476阅读 0赞

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

**一：jsp要弹出的表单**

--------------------

**二：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;  
    \}

--------------------

**四:效果图**

![70][]

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

[70]: /images/20210920/cd6173f32f4f4123aefecc11cfb7e31e.png
[https_blog.csdn.net_liqz666_article_details_83508260]: https://blog.csdn.net/liqz666/article/details/83508260