背景:最近初做项目,需要用ajax完成一些功能,学了一下ajax的用法,期间遇到了两个纠结半天的问题,记录一下。
问题一:点击"注册"按钮时,提交ajax请求,目的是回显错误信息。结果,错误信息一闪而过。
错误的代码(意图和逻辑不用纠结,关注下错误原因):
// 提交数据
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath }/user_regist.action",
data: {
"username": username,
"password": password,
"rePassword": rePassword,
"rname": rname
},
success: function(result) {
if (result == "error") {
$(".error").text("用户名已经存在");
return false; // 本来我的意图是出现错误时,不让提交的,结果还是提交了(也就是一闪而过)。
}
}
});
原因:我理解错了,原来success: function里的return false并不是onsubmit里的return false。
正确的做法:应该在function之外使用return false,可以定义一个全局变量flag,相应的代码就改成
$(".error").text("用户名已经存在");
flag = false;
问题二:使用jquery-ui的autocomplete插件完成自动补全功能,数据自然需要ajax去获取。每输入一个字符都要异步请求一次,结果当我输入到6个字符时(6次请求),浏览器就无响应了,所有功能都不能用,重启tomcat后正常,继续大约6次请求又挂。
当时的想法:ajax的代码有问题?autocomplete有哪些不可告人的秘密?google一下,好像没有多少人因为这方面原因挂了的。
正确的做法:就在我们人生旅程的中途,我在一座昏暗的森林中醒悟过来,因为我听到一个声音一直在说,database、database。我才发现原来maxPoolSize(连接池数量)设置成了6,马上把它改成100,尝试了一下,果然在第100次请求挂掉。
这里顺便复习一下怎么使用autocomplete:
// 自动补全
$(".username").autocomplete({
source: function(request, response) {
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath }/user_queryUserByAjax.action",
data: {
"username": request.term, // 请求参数
},
success: function(data) {
// server返回的数据格式是"张三 李四 王五",必需转换data为数组的格式
var dataArray = data.split(" ");
response(dataArray);
}
});
},
minLength: 1, // 最小匹配长度,也就是输入一个字符(汉字)的时候就匹配
autoFocus: true, // 自动聚焦到第一行
});