实现form表单的提交有多种方式，这里我们主要讲两种。
注：此Demo是在SSM框架下完成的，数据库采用MySQL，关于ssm的相关知识，这里不做过多赘述。主要展示表单提交方式，暂不考虑代码健壮性。...
实现form表单的提交有多种方式，这里我们主要讲两种。
注：此Demo是在SSM框架下完成的，数据库采用MySQL，关于ssm的相关知识，这里不做过多赘述。主要展示表单提交方式，暂不考虑代码健壮性。
一、常见的form表单提交方式
分析：常见的表单提交方式，在表单中添加一个submit按钮，当点击按钮后，通过请求表单的action中的url，跳转到表现层从而完成对表单内容的提交。
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;
}
}
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
测试结果：
提交前：
![\"\"](\"/images/csdn/1545479299r1p5A453479299.png\")
提交后：
![\"\"](\"/images/csdn/1545479300154Y5479y3eR00.png\")
接下来，我们查看一下数据库，成功提交了表单数据。
![\"\"](\"/images/csdn/154547930015k4m8z5479300.png\")
有很多不足的地方欢迎大家指教。感谢阅读
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
