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

1、前端代码

<!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);
    }

  

 

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

上一篇:mormot multipart上传文件


下一篇:C语言之总体