← 返回首页
SpringMVC教程(十二)
发表时间：2020-06-09 23:54:50
接收表单数据

在前后端分离开发的大趋势下，Controller通常以json方式接收表单数据。

项目结构图如下：

实现步骤如下：

接上节案例实现。 1.改写Users实体类

package com.entity;

import java.util.Arrays;

public class Users {

    private int uid;
    private String username;
    private String password;
    private int salary; //薪水
    private String gender; //性别
    private int education; //学历
    private String birthday; //生日
    private String[] favorites; //爱好；
    private String introduce; //自我介绍
    private String province; //籍贯
    private String accept; //是否接受协议

    public Users() {
    }

    public Users(int uid, String username, String password) {
        this.uid = uid;
        this.username = username;
        this.password = password;
    }

    public int getUid() {
        return uid;
    }

    public void setUid(int uid) {
        this.uid = uid;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public int getSalary() {
        return salary;
    }

    public void setSalary(int salary) {
        this.salary = salary;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public int getEducation() {
        return education;
    }

    public void setEducation(int education) {
        this.education = education;
    }

    public String getBirthday() {
        return birthday;
    }

    public void setBirthday(String birthday) {
        this.birthday = birthday;
    }

    public String[] getFavorites() {
        return favorites;
    }

    public void setFavorites(String[] favorites) {
        this.favorites = favorites;
    }

    public String getIntroduce() {
        return introduce;
    }

    public void setIntroduce(String introduce) {
        this.introduce = introduce;
    }

    public String getProvince() {
        return province;
    }

    public void setProvince(String province) {
        this.province = province;
    }

    public String getAccept() {
        return accept;
    }

    public void setAccept(String accept) {
        this.accept = accept;
    }

    @Override
    public String toString() {
        return "Users{" +
                "uid=" + uid +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", salary=" + salary +
                ", gender='" + gender + '\'' +
                ", education=" + education +
                ", birthday='" + birthday + '\'' +
                ", favorites=" + Arrays.toString(favorites) +
                ", introduce='" + introduce + '\'' +
                ", province='" + province + '\'' +
                ", accept='" + accept + '\'' +
                '}';
    }
}

2.在webapp目录下创建reg.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
            integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<h1>用户注册</h1>
<hr>
<div>
    <form id="regForm" action="#" method="post">
        <table>
            <tr>
                <td class="title">用户名：</td>
                <td><input type="text" name="username"/></td>
            </tr>
            <tr>
                <td class="title">密码：</td>
                <td><input type="password" name="password"/></td>
            </tr>
            <tr>
                <td class="title">确认密码：</td>
                <td><input type="password" name="confirmpass"/></td>
            </tr>
            <tr>
                <td class="title">电子邮箱：</td>
                <td><input type="text" name="email" disabled="disabled"/></td>
            </tr>
            <tr>
                <td class="title">薪水：</td>
                <td><input type="text" name="salary" value="10000" hidden/></td>
            </tr>
            <tr>
                <td class="title">性别：</td>
                <td><input type="radio" value="M" name="gender" checked/>男<input type="radio" value="F" name="gender"/>女
                </td>
            </tr>
            <tr>
                <td class="title">学历：</td>
                <td>
                    <select name="education">
                        <option value="-1" selected>-----请选择-----</option>
                        <option value="0">文盲</option>
                        <option value="1">小学</option>
                        <option value="2">初中</option>
                        <option value="3">高中</option>
                        <option value="4">大专</option>
                        <option value="5">本科</option>
                        <option value="6">硕士</option>
                        <option value="7">博士</option>
                        <option value="8">博士后</option>
                        <option value="9">圣斗士</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="title">籍贯：</td>
                <td>
                    <input list="province" name="province" value=""/>
                    <datalist id="province">
                        <option value="河北">
                        <option value="河南">
                        <option value="山东">
                        <option value="山西">
                        <option value="陕西">
                    </datalist>
                </td>
            </tr>
            <tr>
                <td class="title">出生日期：</td>
                <td><input type="date" name="birthday" value=""/></td>
            </tr>
            <tr>
                <td class="title">爱好：</td>
                <td>
                    <!--复选框name名字必须一样-->
                    <input type="checkbox" name="favorites" value="read"/>读书
                    <input type="checkbox" name="favorites" value="music"/>音乐
                    <input type="checkbox" name="favorites" value="internet"/>上网
                    <input type="checkbox" name="favorites" value="nba"/>NBA
                </td>
            </tr>
            <tr>
                <td class="title">自我介绍：</td>
                <td><textarea rows="10" cols="25" name="introduce"></textarea></td>
            </tr>
            <tr>
                <td class="title">上传照片：</td>
                <td><input type="file" name="pic"/></td>
            </tr>
            <tr>
                <td class="title">是否接受条款：</td>
                <td><input type="checkbox" name="accept"/>我无条件接受霸王条款</td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button type="button" onclick="doReg()">注册</button>
                    <input type="reset" value="重置"/></td>
            </tr>
        </table>
    </form>
</div>

<script>

    //jquery的表单转json的方法
    $.fn.parseForm = function () {
        var serializeObj = {};
        var array = this.serializeArray();
        var str = this.serialize();
        $(array).each(function () {
            if (serializeObj[this.name]) {
                if ($.isArray(serializeObj[this.name])) {
                    serializeObj[this.name].push(this.value);
                } else {
                    serializeObj[this.name] = [serializeObj[this.name], this.value];
                }
            } else {
                serializeObj[this.name] = this.value;
            }
        });
        return serializeObj;
    };

    function doReg() {

        var param = $("#regForm").parseForm();
        console.log(JSON.stringify(param));
        //发送ajax请求 
        $.ajax({
            url: 'http://localhost:8888/springmvctest/users',
            data: JSON.stringify(param),
            type: 'post',
            contentType: 'application/json', //注意这里必须添加contentType: 'application/json'
            async: false,
            success: function (data) {
                console.log(data);
            }
        });
    }
</script>

</body>
</html>

3.改写UsersController的保存用户动作

package com.controller;

import com.entity.Users;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpSession;
import java.util.ArrayList;
import java.util.List;

@RestController
@RequestMapping("users")
public class UsersController {

    @PostMapping(value="")
    public Users add(@RequestBody Users user){
        System.out.println("执行用户注册或者添加新用户....");
        System.out.println("新增用户资料："+user);
        return user;
    }

}

4.测试提交表单

服务器控制台输出结果：

执行用户注册或者添加新用户....
新增用户资料：Users{uid=0, username='张三', password='123456', salary=10000, gender='M', education=2, birthday='2020-06-02', favorites=[music, internet], introduce='程序猿', province='山东', accept='on'}

浏览器控制台输出结果：