目录
一、问题分析
二、处理问题
一、问题分析
- 在测试员工管理系统的登录和注册代码时，登录一切正常，就是注册成功后没有跳转页面，后面发现是success-function回调函数没有正常执行。
- 原因主要是前端和后端交流的数据格式不一致，前端需要的JSON格式的数据，但后端返回的不是JSON格式的数据。
- 具体可以检查跟后端返回数据格式相关的部分代码，比如控制器、结果封装类，前端页面等
- 添加error部分，发现是后端返回的result对象出问题
- 进而检查控制器代码
- 参考文章：
- 1、javascript - ajax的success: function (data)不执行怎么回事？ - SegmentFault 思否
- 2、ajax请求成功但不执行success-function回调函数 - 余生大大 - 博客园 (cnblogs.com)
- 3、Ajax请求成功, 但进不去success方法 - Vitoboy - 博客园 (cnblogs.com)
- 4、
二、处理问题
- 控制器少了@RequestBody
@ResponseBody注解用于直接将方法返回的对象序列化为 JSON 或其他格式的数据返回给客户端。- 部分代码如下
控制器
@Controller
public class LoginController {
@Autowired
private UserService userService;
@ApiOperation("注册")
@ResponseBody
@RequestMapping(value = "/register",method = RequestMethod.POST)
public CommonResult register(@RequestBody User user,HttpServletRequest request,HttpServletResponse response){
CommonResult commonResult = new CommonResult();
//校验参数是否为空
if(user == null || StringUtils.isEmpty(user.getUsername()) || StringUtils.isEmpty(user.getPassword())){
commonResult.setCode(CommonCode.FAIL);
commonResult.setMsg("用户名和密码不能为空!!");
return commonResult;
}
User userByUsername = userService.getUserByUsername(user.getUsername());
if(userByUsername != null){
commonResult.setCode(CommonCode.FAIL);
commonResult.setMsg("用户名已经存在!!");
}else{
//更新新用户创建时间
user.setCreatetime(new Date());
//存储加密后的新用户信息
int result = userService.addUser(user);
if(result == 1){
commonResult.setCode(CommonCode.SUCCESS);
}else{
commonResult.setCode(CommonCode.FAIL);
commonResult.setMsg("系统原因,请重试或联系管理员!!");
}
}
return commonResult;
}
}
结果封装类
package com.study.hrms.common;
import java.util.List;
/**
* 用于封装接口返回结果的通用格式,包括状态码,消息和数据
*/
public class CommonResult {
public int code;//状态码
public String msg;
public Object data;
/**
* 不同参数的构造函数
*/
public CommonResult(int code, String msg, Object data) {
this.code = code;
this.msg = msg;
this.data = data;
}
public CommonResult(int code, String msg) {
this.code = code;
this.msg = msg;
}
public CommonResult() {
}
/**
* 静态方法,创建对象并返回结果的通用格式
*/
public static <T extends Object> CommonResult success(List<T> list){
CommonResult commonResult = new CommonResult();
commonResult.setCode(CommonCode.SUCCESS);
commonResult.setData(list);
return commonResult;
}
public static <T extends Object> CommonResult success(Object data){
CommonResult commonResult = new CommonResult();
commonResult.setCode(CommonCode.SUCCESS);
commonResult.setData(data);
return commonResult;
}
public static <T extends Object> CommonResult success(){
CommonResult commonResult = new CommonResult();
commonResult.setCode(CommonCode.SUCCESS);
return commonResult;
}
public static CommonResult fail(String msg){
CommonResult commonResult = new CommonResult();
commonResult.setCode(CommonCode.SUCCESS);
commonResult.setMsg(msg);
return commonResult;
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
}
注册页面
<!DOCTYPE html>
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=utf-8" %>
<%@ include file="common/taglibs.jsp" %>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>员工管理系统-注册</title>
<%@ include file="common/meta.jsp" %>
<link rel="stylesheet" href="/static/css/views/login.css" media="all"/>
</head>
<body>
<!-- Head -->
<!-- Head End -->
<!-- Carousel -->
<!-- Carousel End -->
<!-- Footer -->
<!-- Footer End -->
<!-- LoginForm -->
<div class="login_main">
<fieldset class="layui-elem-field layui-field-title hazel_mar_02">
<legend>员工管理系统注册</legend>
</fieldset>
<div class="layui-row layui-col-space15">
<form class="layui-form hazel_pad_01" action="">
<div class="layui-col-sm12 layui-col-md12">
<div class="layui-form-item">
<input type="text" name="username" lay-verify="required|userName" autocomplete="off" placeholder="账号" class="layui-input">
<i class="layui-icon layui-icon-username login_icon"></i>
</div>
</div>
<div class="layui-col-sm12 layui-col-md12">
<div class="layui-form-item">
<input type="password" name="paword" lay-verify="required|pass" autocomplete="off" placeholder="密码" class="layui-input">
<i class="layui-icon layui-icon-password login_icon"></i>
</div>
</div>
<div class="layui-col-sm12 layui-col-md12">
<div class="layui-form-item">
<input type="password" lay-verify="required|confirmPass" autocomplete="off" placeholder="确认密码" class="layui-input">
<i class="layui-icon layui-icon-password login_icon"></i>
</div>
</div>
<div class="layui-col-sm12 layui-col-md12">
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="go">注册</button>
</div>
<div class="layui-form-mid layui-word-aux"><a href="/loginPage">登录</a></div>
<div class="layui-form-mid layui-word-aux hint">
<span id="registermsg"></span>
</div>
</form>
</div>
</div>
<script>
layui.use('form', function () {//加载form模块
var form = layui.form;
var $ = layui.$;
form.verify({
confirmPass:function(value){
if($('input[name=paword]').val() !== value){
console.log($('input[name=paword]').val()+":"+value);
$("#registermsg")[0].innerHTML = '两次密码输入不一致！';
return "false";
}
}
});
//submit登录按钮
form.on('submit(go)', function (data) {
var user = {};//构造user对象，传递参数
user.username = $("input[name=username]").val();
user.password = hex_md5($("input[name=paword]").val());//密码使用MD5加密
$.ajax({
url: "/register",
type: "POST",
data: JSON.stringify(user),//传递json类型的参数
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
if(result.code == COMMON_SUCCESS_CODE){
location.href = '/login'
}else{
$("#registermsg")[0].innerHTML = result.msg;
}
}
})
return false;//拦截layui自带的提交
})
});
</script>
</body>
</html>
