Form表单异步提交，不刷新页面

来源：互联网发布：广电网络电视怎么开编辑：程序博客网时间：2024/06/09 23:14

一.先导入需要用到的js

二.HTML代码

<form method="post" id="registUser" >            <table class="contBox" style="margin-left:33%;background-color:#fff;padding:50px 140px 50px 80px;" >                <tr>                    <td align="right">注册账户：</td>                    <td><input type="text" name="userId" onblur="checkUserID()" required="required"/>*必填</td>                </tr>                <tr>                    <td align="right">用户名：</td>                    <td><input type="text" name="userName" required="required"/>*必填</td>                </tr>                <tr>                    <td align="right">密码：</td>                    <td><input type="text" name="password" required="required"/>*必填</td>                </tr>                <tr>                    <td align="right">手机：</td>                    <td><input type="text" name="phoneNum" onblur="checkPhone()" required="required"/>*必填</td>                </tr>                <tr>                    <td align="right">Email：</td>                    <td><input type="text" name="email" onblur="checkEmail()"/></td>                </tr>                <tr>                    <td colspan="2" align="center"><input type="submit" value="注册" class="btn-regist" style="border-radius:5px;width: 100px;margin-left: 80px;"/><input type="button" value="关闭" class="btn-regist" style="border-radius:5px;width: 100px;" onclick="closeWindow()"/></td>                                    </tr>            </table>    </form>

三.表单提交事件

$("#registUser").submit(function(){      $(this).ajaxSubmit({            type:"post",  //提交方式              dataType:"json", //数据类型              url:"userRegist.do", //请求url              success:function(data){ //提交成功的回调函数                  alert(data.msg);                  if (data.succ) {                    //注册成功信息重置                    $("#registUser").resetForm();                }            }    });    return false; //不刷新页面  })

四.java后台代码，Spring mvc框架

/**     * 用户注册接口     * @param userId 用户账号     * @param userName 用户姓名     * @param password 密码     * @param phoneNum 电话     * @param email 电子邮箱     * @param regionoId 地域ID     * @return 验证结果     */    @RequestMapping("/userRegist")    public @ResponseBody Map<String, Object> userRegist(@RequestParam String userId,@RequestParam String userName,@RequestParam String password,            @RequestParam String phoneNum,@RequestParam(required=false) String email,@RequestParam String regionId,@RequestParam String userRoleId){        Map<String, Object> json=new HashMap<String,Object>();        if (userId==null||userId.equals("")) {            json.put("succ", false);            json.put("msg", "用户账号为空！");            logger.error("用户账号为空！");            return json;        }else if (userService.checkUserID(userId)) {            json.put("succ", false);            json.put("msg", "该账户已存在！");            logger.error("该账户已存在！");            return json;        }else if (userName==null||userName.equals("")) {            json.put("succ", false);            json.put("msg", "用户姓名不能为空！");            logger.error("用户姓名为空！");            return json;        }else if (password==null||password.equals("")) {            json.put("succ", false);            json.put("msg", "密码为空！");            logger.error("密码为空！");            return json;        }else if (RegExpValidatorUtils.IsPasswLength(password)==false) {            json.put("succ", false);            json.put("msg", "密码长度 (6-18位)");            logger.error("密码不合法，密码长度 (6-18位)");            return json;        }else if (phoneNum==null||phoneNum.equals("")) {            json.put("succ", false);            json.put("msg", "电话为空！");            logger.error("电话为空！");            return json;        }else if (RegExpValidatorUtils.IsTelephone(phoneNum)==false) {            json.put("succ", false);            json.put("msg", "电话格式不正确！");            logger.error("电话格式不正确！");            return json;        }else if (email!=null&&!email.equals("")&&RegExpValidatorUtils.isEmail(email)==false) {            json.put("succ", false);            json.put("msg", "邮箱格式不正确！");            logger.error("邮箱格式不正确！");            return json;        }else if (userRoleId==null||userRoleId.equals("")) {            json.put("succ", false);            json.put("msg", "角色ID为空！");            logger.error("角色ID为空！");            return json;        }        String userStatus="1";//用户状态 初始1        String createBy="admin";//创建人 初始admin        Date createDate=new Date();//注册时间        password=AlgorithmUtils.encodePassword(password, AlgorithmEnum.MD5);        UserDO userDO=new UserDO(userId, userName, phoneNum, password, email, userStatus, userRoleId, createBy, createDate, regionId);        if (userService.addUser(userDO)) {            json.put("succ", true);            json.put("msg", "注册成功！");            logger.info("注册成功！");            return json;        } else {            json.put("succ", false);            json.put("msg", "注册失败！");            logger.error("注册失败！");            return json;        }    }

0 0