应用场景:在注册页面,输入用户名,判断用户名是否存在,正常用Ajax的异步处理,测试时输入“存在的用户名”,鼠标移出且改变文本,但是页面没有反应!!!!,在浏览器F12进入控制台查看报错信息“ Uncaught RangeError: Maximum call stack size exceeded
”中文意思“未捕获范围错误:最大栈超过了最大值”,可是这种错误一般出现在逻辑递归函数中!那怎么回事了?
前端控制台报错:
Servlet代码:
/*
* 检查用户名是否存在
*/
protected void checkUserName(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
PrintWriter writer = response.getWriter();
//取值
String username = request.getParameter("username");
//调用
User user = userService.checkUserName(username);
if(user == null) {
//不存在,用户名可用
writer.write("true");//用文本的形式响应
}else {
//用户名存在,请重新输入
writer.write("false");
}
}
javascript代码:
<title>图书会员注册页面</title>
<%@include file="/WEB-INF/include/base.jsp"%>
<script type="text/javascript">
$(function(){
//change&ajax验证用户名是否存在
$("#username").change(function(){
//取值
var name = $(this).val(); //报错var name 与 {"username":username}不一致
//Ajax请求xxServlet
$.get("UserServlet?method=checkUserName",{"username":username},function(res){
//dataType默认类型化是文本类型
/* alert(typeof(res)); */
if(res == "true"){
$(".errorMsg").html("用户可用!").css("color","green");
}else{
$(".errorMsg").html("用户名已经存在,请重新输入!").css("color","red");
}
});
});
});
☛百度了一下:大多解决方案都说把Chrome缓存和Cookie所有数据清理!!!,我试了一下,结果没用,沉下心来,应该是细节问题…
bug分析查找:
点击报错中at Number.toString (<anonymous>)
,跟踪查找!
可见,就是function函数中的参数字符串出现了问题,再看我的js代码var
定义的 name
变量与 {"username":username}
中的username
属性值不一致!!!!修改为:
$("#username").change(function(){
//取值
var username = $(this).val(); //报错var name 与 {"username":username}不一致
//Ajax请求xxServlet
$.get("UserServlet?method=checkUserName",{"username":username},function(res){
Bug成功解决,细节问题,涨知识!
正常校验成功页面
数据库存在该用户名,注册不会通过!
数据库不存在该用户名,注册会通过!
☝上述分享来源个人总结,如果分享对您有帮忙,希望您积极转载;如果您有不同的见解,希望您积极留言,让我们一起探讨,您的鼓励将是我前进道路上一份助力,非常感谢!我会不定时更新相关技术动态,同时我也会不断完善自己,提升技术,希望与君同成长同进步!
☞本人博客:https://coding0110lin.blog.csdn.net/ 欢迎转载,一起技术交流吧!