JavaWeb通过前端向Mysql数据库中插入数据问题

作为入门小白，记录下因为基础不扎实而踩得坑

在写注册界面时，需要利用web界面输入数据，idea操作向数据库插入数据。

首先确定了数据库正常，tomcat正常运行，sql语句正常，在idea中测试业务层也能正常向数据库中插入数据，但是在web页面输入数据后，数据库中的新插入的整行数据全部都为null。

最后发现是input标签没有写name值。。。

name 属性规定 input 元素的名称。

name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。

注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

// html

<div id="userRegist">
    <h3>用户注册界面</h3>
    <form class="form-horizontal" id="userRegistForm">
        <div class="form-group">
            <label for="userName" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="userName" placeholder="用户名" name="userName">
            </div>
        </div>
        <div class="form-group">
            <label for="userPwd" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="userPwd" placeholder="密码" name="userPwd">
            </div>
        </div>
        <div class="form-group">
            <label for="userAge" class="col-sm-2 control-label">年龄</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="userAge" placeholder="年龄" name="userAge">
            </div>
        </div>
        <div class="form-group">
            <label for="userPhone" class="col-sm-2 control-label">手机号</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="userPhone" placeholder="手机号" name="userPhone">
            </div>
        </div>
        <div class="form-group">
            <label for="userEmail" class="col-sm-2 control-label">邮箱</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="userEmail" placeholder="邮箱" name="userEmail">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default" id="userRegistBtn">提交</button>
            </div>
        </div>
    </form>
</div>

// java 代码

/**
     * 用户注册
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    public void addUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置编码格式，获取数据
        req.setCharacterEncoding("utf-8");
        String userName = req.getParameter("userName");
        String userPwd = req.getParameter("userPwd");
        String userAgeStr = req.getParameter("userAge");
        Integer userAge = null;
        if (userAgeStr != null && !"".equals(userAgeStr)) {
            userAge = Integer.valueOf(userAgeStr);
        }
        String userPhone = req.getParameter("userPhone");
        String userEmail = req.getParameter("userEmail");

        //封装数据
        User user = new User(null, userName, userPwd, userAge, userPhone, userEmail);

        //调用业务层方法
        User byUserName = userService.findByUserName(userName);

        //返回信息的实体类

        resp.setContentType("application/JSON;charset=utf-8");
        PrintWriter writer = resp.getWriter();
        //判断
        //如果用户不存在 调添加用户方法
        //如果用户存在 提示已存在
        if (byUserName == null) {
            int rows = userService.addUser(user);

            //判断是否添加成功
            if (rows > 0) {
                //添加成功
                System.out.println("添加成功");
//                writer.print("添加成功");
                re.setReturnCode(CodeAndMsg.OPERATE_SUCCESS.getReturnCode());
                re.setReturnMsg(CodeAndMsg.OPERATE_SUCCESS.getReturnMsg());

            } else {
                //添加失败
                re.setReturnCode(CodeAndMsg.OPERATE_FAIL.getReturnCode());
                re.setReturnMsg(CodeAndMsg.OPERATE_FAIL.getReturnMsg());
            }
        } else {
            //用户已存在
            re.setReturnCode(CodeAndMsg.OPERATE_FAIL.getReturnCode());
            re.setReturnMsg(CodeAndMsg.OPERATE_FAIL.getReturnMsg());

        }
        writer.print(JSON.toJSONString(re));
        writer.close();

    }