实现form表单的提交有多种方式，这里我们主要讲两种常用的。
注：此Demo是在SSM框架下完成的，数据库采用MySQL，关于ssm整合的相关知识，这里不做过多赘述。主要展示表单提交方式，暂不考虑代码健壮性。
一、常见的form表单提交方式
分析：常见的表单提交方式，在表单中添加一个submit按钮，当点击按钮后，通过请求表单的action中的url，跳转到表现层从而完成对表单内容的提交。
弊端：当提交的数据量非常大时，所花费时间较长，我们需要等待页面响应完成后，才能进行其他操作。这样会影响用户体验。这样就可以使用ajax来完成form表单的提交。
二、使用ajax完成form表单提交
分析：使用ajax异步请求来进行表单提交，这样在等待表单提交的时间里，我们可以在页面中进行其他操作，这样会有更好的用户体验。
三、注意事项
- 在常用方式中，点击的登录按钮的type为”submit”类型；
- 在常用方式中，form的action不为空；
- ajax方式中需要注意的是$.ajax方法中的参数：dataType和data。
因为主要是做后端的，所以平时前端写的较少，级别也就是入门级别，能看懂能改而已，所以很多时候需要百度和查看其他技术人员的博客。这次，我参考的代码在$.ajax方法中设置的dataType参数值为”html”而不是”json”，导致我在一开始调试的时候报错，最终是改成了”json”才成功，因此在这里特别说明并提醒一下，别和我一样走错了路，还有就是向服务端传输的data值了，像上面代码一样，将form表单中的数据序列化传输即可。
四、代码示例
jsp页面：testCommitForm.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>用户信息</title>
</head>
<body>
<%--常见的form表单提交方式--%>
<table>
<h2 style="color: red">常见的表单提交方式：</h2><br>
<form id="userInfo1" method="post" action="/addUserNormal">
姓名:<input type="text" name="name"><br>
年龄:<input type="text" name="age"><br>
所在地:<input type="text" name="area"><br>
结果：<h3>${msg}</h3><br>
<input type="submit" value="提交">
</form>
</table>
<br>
<br>
<br>
<%--使用jquery的ajax提交form表单--%>
<table>
<h2 style="color: red">使用ajax实现表单提交：</h2><br>
<form id="userInfo2" method="post">
姓名:<input type="text" name="name"><br>
年龄:<input type="text" name="age"><br>
所在地:<input type="text" name="area"><br>
结果：<h3 id="result"></h3><br>
<input id="commit" type="button" value="提交">
</form>
</table>
</body>
<script src="../js/jquery-3.3.1.js"></script>
<script>
$(function () {
$("#commit").click(function () {
$.ajax({
url: "/addUserAjax",
type: "post",
//.serialize() 当提交多条表单数据时，我们可以采用当表单进行序列化的方式简化原有的操作
data: $("#userInfo2").serialize(),
dataType: "json",
success: function (result) {
if (result == "success") {
$("#result").html("添加成功");
} else {
$("#result").html("添加失败");
}
}
})
})
})
</script>
</html>
controller层：UserController
package com.javawangming.controller;
import com.alibaba.fastjson.JSON;
import com.javawangming.bean.User;
import com.javawangming.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class UserController {
@Autowired
private UserService userService;
@RequestMapping("/addUserNormal")
@ResponseBody
public ModelAndView addUserNormal(User user){
ModelAndView mv=new ModelAndView();
try {
userService.addUser(user);
mv.setViewName("testCommitForm");
} catch (Exception e) {
e.printStackTrace();
mv.addObject("msg", "添加失败");
}
mv.addObject("msg", "添加成功");
return mv;
}
@RequestMapping("/addUserAjax")
@ResponseBody
public String addUserAjax(User user){
try {
userService.addUser(user);
} catch (Exception e) {
e.printStackTrace();
return JSON.toJSONString("false");
}
return JSON.toJSONString("success");
}
}
javabean:User
package com.javawangming.bean;
public class User {
int id;
String name;
int age;
String area;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getArea() {
return area;
}
public void setArea(String area) {
this.area = area;
}
}
service层：UserService
package com.javawangming.service;
import com.javawangming.bean.User;
public interface UserService {
void addUser(User user);
}
UserServiceImpl
package com.javawangming.service.impl;
import com.javawangming.bean.User;
import com.javawangming.dao.UserDao;
import com.javawangming.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserDao userDao;
@Override
public void addUser(User user) {
userDao.addUserInfo(user);
}
}
dao层：UserDao
package com.javawangming.dao;
import com.javawangming.bean.User;
public interface UserDao {
void addUserInfo(User user);
}
UserDao.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.javawangming.dao.UserDao">
<insert id="addUserInfo" parameterType="com.javawangming.bean.User">
insert into user_info (name,age,area) values(#{name},#{age},#{area});
</insert>
</mapper>数据库表：user_info
CREATE TABLE `user_info` (
`id` int(4) NOT NULL AUTO_INCREMENT,
`name` varchar(20) DEFAULT NULL,
`age` int(3) DEFAULT NULL,
`area` varchar(20) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8测试结果：
提交前：
提交后：
接下来，我们查看一下数据库，成功提交了表单数据。
有很多不足的地方欢迎大家指教。感谢阅读
