ajax请求成功但不执行success-function回调函数

一、问题分析

在测试员工管理系统的登录和注册代码时，登录一切正常，就是注册成功后没有跳转页面，后面发现是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 或其他格式的数据返回给客户端。

部分代码如下

控制器

java 复制代码

@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;
    }
}

结果封装类

java 复制代码

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

注册页面

html 复制代码

<!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>