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 或其他格式的数据返回给客户端。
部分代码如下

控制器

@Controller
public class LoginController {@Autowiredprivate 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/51459.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！