一个小案例, 做了一下结果各种问题... 学的太不认真了, 各种漏洞, 记录一下, 编码要注意细节啊!!
案例要求很简单, 就是用户注册界面, 使用Ajax进行用户名存在性验证, 使用json进行前后端数据交互。
bug1:
image.png
image.png
提示js资源文件找不到, 函数未定义。显然应该是没有导入js文件或者文件放错位置了, 可是已经放了js文件啊, 一检查发现把js文件夹放到web/WEB-INF中了...
所以再次强调, js文件夹/font文件夹/css文件夹都放在web文件夹下, 与WEB-INF同级, WEB-INF文件下一般放lib文件夹, lib中放置jar包。
bug2: 只显示"用户名可用"
在servlet里面回写数据的时候, 用户名可用的情况时, 把键名写错了, "msg"写成了"mag", 在前端取data.msg时自然取出来的就是undefined
bug3: 不同的提示信息颜色不改变
又是键名写错了, 我真是服了... 把userExist写成了userExsit...
注意: 此外注意一个编码问题, 在servlet将map集合转为了json字符串, 然后通过字符输出流输出到页面, 这里实现要设置中文编码, 要不然就是问号???
正常代码
前端:html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//在页面加载完成后
$(function () {
//给username绑定blur事件
$("#username").blur(function () {
//获取username文本输入框的值
var username = $(this).val();
//发送ajax请求
//期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
// {"userExsit":false,"msg":"用户名可用"}
$.get("findUserServlet",{username:username},function (data) {
//判断userExsit键的值是否是true
// alert(data);
var span = $("#s_username");
alert(data.msg);
if(data.userExist){
//用户名存在
span.css("color","red");
span.html(data.msg);
}else{
//用户名不存在
span.css("color","green");
span.html(data.msg);
}
}, "json");
});
});
</script>
</head>
<body>
<form>
<input type="text" id="username" name="username" placeholder="请输入用户名">
<span id="s_username"></span>
<br>
<input type="password" name="password" placeholder="请输入密码"><br>
<input type="submit" value="注册"><br>
</form>
</body>
</html>
后端:
package cn.zxy.servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 获取用户名
String username = request.getParameter("username");
System.out.println(username);
//输出字符集
response.setContentType("text/html;charset=utf-8");
Map<String, Object> map = new HashMap<>();
// 调用service判断用户名是否存在
if("tom".equals(username)){
map.put("userExist", true);
map.put("msg", "此用户名太受欢迎, 请更换一个");
}else{
map.put("userExist", false);
map.put("msg", "用户名可用");
}
// 转为json 传递给客户端
ObjectMapper objectMapper = new ObjectMapper();
objectMapper.writeValue(response.getWriter(), map);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
网友评论