使用ajax实现form提交

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文件哦
在这里插入图片描述

<%@ 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>

在这里插入图片描述

来源：CSDN

作者：MR_非凡

链接：https://blog.csdn.net/weixin_44411569/article/details/104523992

标签

form

form表单提交

ajax

static