使用ajax实现form提交

深藏阁楼爱情的钟 2023-07-08 14:28 145阅读 0赞

**1、常见的form表单提交都是使用submit 直接提交给form表单 中action的地址。**

*  常见的form表单提交

<form:form action="<%=request.getContextPath()%>/login/role_add.do" method="post" modelAttribute="role" >
    <div class="form-group">
        <label class="form-label"><span class="c-red">*</span>角色名称：</label>
        <div class="formControls">
          <input type="text" name="roleName" required="required" lay-verify="title" autocomplete="off" placeholder="角色名称"  class="layui-input" />
        </div>
    </div>
    <div class="form-group">
        <label class="form-label"><span class="c-red">*</span>角色描述：</label>
        <div class="formControls">
          <input type="text" name="roleDescript" required="required" lay-verify="title" autocomplete="off" placeholder="角色描述" class="layui-input">
        </div>
    </div>
     <div class="form-group">
        <div class="formControls">
          <input type="submit" value="添加"  class="btn btn-primary radius" onclick="closeLayer()" />
          <button type="reset" class="btn btn-primary radius">重置</button>
        </div>
      </div>
    </form:form>

**2、使用ajax进行form提交，需要获取form表单，进行序列化**  
注意事项、**我是直接使用id获取form表单然后序列化，data 指的具体数据 、dataType 是数据格式**最后千万别忘了引入jquery文件哦  
![在这里插入图片描述][20200226203101683.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ_size_16_color_FFFFFF_t_70]

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
        <script src="../static/dsadmin/healthtest/js/jquery-1.7.2.min.js" type="text/javascript"></script>
        <link href="../static/dsadmin/assets/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="../static/dsadmin/css/style.css"/>       
        <link href="../static/dsadmin/assets/css/codemirror.css" rel="stylesheet">
        <link rel="stylesheet" href="../static/dsadmin/assets/css/ace.min.css" />
        <link rel="stylesheet" href="../static/dsadmin/font/css/font-awesome.min.css" />  
        <script src="../static/dsadmin/healthtest/js/layer/layer.js" type="text/javascript"></script>
    	<script src="../static/dsadmin/healthtest/js/layer/layer.config.js" type="text/javascript"></script>       
    <title>Insert title here</title>
    </head>
    <body>
    <form:form id="form" method="post" modelAttribute="role" >
    <div class="form-group">
        <label class="form-label"><span class="c-red">*</span>角色名称：</label>
        <div class="formControls">
          <input type="text" name="roleName" required="required" lay-verify="title" autocomplete="off" placeholder="角色名称"  class="layui-input" />
        </div>
    </div>
    <div class="form-group">
        <label class="form-label"><span class="c-red">*</span>角色描述：</label>
        <div class="formControls">
          <input type="text" name="roleDescript" required="required" lay-verify="title" autocomplete="off" placeholder="角色描述" class="layui-input">
        </div>
    </div>
     <div class="form-group">
        <div class="formControls">
          <input type="button" value="添加"  class="btn btn-primary radius" onclick="closeLayer()" />
          <button type="reset" class="btn btn-primary radius">重置</button>
        </div>
      </div>
    </form:form>
    </body>
    <script type="text/javascript">
    function closeLayer(){ 
    	$.ajax({ 
            type:'POST',
            url:'<%=request.getContextPath()%>/login/role_add.do',
            data:$('#form').serialize(),
            dataType: 'json',
            success:function(response){ 
    	 		if(response) { 
    				layer.msg("保存成功！",{ icon:1,
    										time:-1,
    										btn:['关闭']
    										},function(){ 
    											parent.location.reload(); 
    										}
    									);
    			} else{ 
    				layer.msg("保存添加失败！",{ icon:2,time:-1,btn:['关闭']});
    			} 
            },
            error:function(data){ 	
            	layer.msg("保存添加失败！",{ icon:2,time:-1,btn:['关闭']});
            }
        })
    }
    </script>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ_size_16_color_FFFFFF_t_70 1]

[20200226203101683.png]: https://img-blog.csdnimg.cn/20200226203101683.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200226203003871.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200226203713369.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ==,size_16,color_FFFFFF,t_70