通过Ajax转入对象，后端通过@RequestBody接收

1、前端代码

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>清风</title>
<link type="text/css" href="css/css.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/restfull.js"></script>
</head>
 
<body style="background: #FFF;">
    <div class="loginLogo">
        <div class="logoMid">
            <h1 class="logo" style="height: 71px; padding-top: 10px;">
                <a href="index.html"><img src="images/loginLogo.jpg"
                    width="241" height="71" /></a>
            </h1>
            <div class="loginReg">
                还没有会员账号? <a href="login.html">登录</a>
            </div>
        </div>
    </div>
 
    <div class="loginBox">
        <!-- <img src="../images/chengnuo.jpg" width="295" height="393" class="chengnuo" /> -->
     
            <!--用户名-->
            <div class="regList">
                <label>账户名:</label> 
                <input id="username" name="username" type="text" class="form-control"  placeholder="请输入用户名" />
                <span style="color: #999;"></span>
            </div>    
            <!--密码-->
            <div class="regList">
                <label>请设置密码:</label>
                <input id="Password" name="password" type="text" class="form-control"  placeholder="请输入密码" />
            </div>
            <!--确认密码-->
            <div class="regList">
                <label> 请确认密码:</label> 
                <input id="crmPassword" type="text" class="form-control"  placeholder="请再次输入密码" />
            </div>
            <!--手机号-->
            <div class="regList">
                    <label> 手机号:</label> 
                    <input id="Phone"  name="phone"  type="text" class="form-control"  placeholder="请输入你的手机号" />
            </div>
            <!--  验证码-->
            <div class="regList">
                <label >短信验证码:</label>      
                    <input id="smscode" type="text" placeholder="短信验证码"/> 
                    <a href="javascript:void(0)" onclick="sendCode()">获取短信验证码</a>           
            </div>
             
            <div class="xieyi">
                <input type="checkbox" /> 我已经阅读并同意<a href="#">《17用户注册协议》</a>
            </div>
            <!--提交按钮-->      
            <div class="reg">
                <!-- <input id="btn-reg"  type="button" value="立即注册" /> -->
                <!-- <input   id="btn-reg"   type="button" src="../images/reg.jpg" width="284" height="34" /> -->
                <input id="btn-reg" type="button" value="立即注册" />
            </div>        
 
 
        <div class="clears"></div>
    </div>
    <!--  页面结束-->
     
    <script type="text/javascript">
 
                $("#btn-reg").click(function(){
                    var username = document.getElementById("username").value;
                    var password = document.getElementById("Password").value;
                    var crmPassword = document.getElementById("crmPassword").value;
                    var phone = document.getElementById("Phone").value;
                    var code = document.getElementById("smscode").value;
                    console.log("注册参数1："+ username);
                    console.log("注册参数2："+ phone);
                        if(password !=crmPassword ){
                             alert("密码不一致");
                             return false;
                        }
                        var param = {
                            username:username,
                            password:password,
                            phone:phone,
                            code:code
                        }
                        var url = restapi.url_api_e17+"user/register";
                            console.log("注册参数："+ JSON.stringify(param));    
                        var requestBody = JSON.stringify(param);// 将JSON对象转换为JSON字符串    
                        $.ajax({
                            "url":url,
                            "data":requestBody,
                            "type":"post",
                            "contentType":"application/json;charset=UTF-8",
                            "dataType":"json",
                            "async" : true,
                            "success": function(json){
                                console.log("=====json==="+json)
                                if(json.status == 200){
                                    alert("注册成功");
                                    window.location.assign("login.html")
                            }else{
                                    alert(json.message);
                            }
                        }   
                    });
                });
                     
             
        }
        </script>
     
     
</body>
</html>

2、后端代码

接收前端传递的数据封装的对象

package com.qing.e17.pojo.bo;

import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

import java.io.Serializable;

@Data
@ApiModel(value = "注册对象")
public class RegisterBo implements Serializable {

    @ApiModelProperty(value = "用户名")
    private String username;
    @ApiModelProperty(value = "密码")
    private String password;
    @ApiModelProperty(value = "手机号",example = "13699996666" ,required = true)
    private String phone;
    @ApiModelProperty(value = "手机验证码",example = "6666")
    private String code;

}

Controller层代码

@ApiOperation("注册")
@PostMapping("/register")
public Result register(@RequestBody RegisterBo registerBo, HttpSession session){
    String phone = registerBo.getPhone();
    String code = registerBo.getCode();
    log.info("电话号码"+phone);
    //校验参数
    if (StringUtils.isBlank(phone)&&StringUtils.isBlank(code) ){
        throw new MyException(ExceptionEnum.USERNAME_PASSWORD_NULL);
    }
    //根据phone查询用户
    User  user =  userService.findByPhone(phone);
    if (user != null){
        throw new MyException(ExceptionEnum.USER_NOT);
    }
    //用户不存在，则注册用户
    User saveUser = new User();
    saveUser.setUsername(registerBo.getUsername());
    String md5Password = MD5Util.MD5(registerBo.getPassword());
    saveUser.setPassword(md5Password);
    saveUser.setPhone(registerBo.getPhone());
    saveUser.setCreatedTime(new Date());
    saveUser.setUpdatedTime(new Date());
    userService.saveUser(saveUser);
    log.info("保存新用户的成功");
    return Result.ok(saveUser);
}