在SSM架构中，如何轻松完成表单数据的提交？

最编程 2024-07-20 20:13:43

...

实现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

测试结果：

提交前：

提交后：

接下来，我们查看一下数据库，成功提交了表单数据。

有很多不足的地方欢迎大家指教。感谢阅读

上一篇：使用Django构建简易表单（Django Form）

下一篇：表单