一個小案例, 做了一下結(jié)果各種問題... 學的太不認真了, 各種漏洞, 記錄一下, 編碼要注意細節(jié)啊!!
案例要求很簡單, 就是用戶注冊界面, 使用Ajax進行用戶名存在性驗證, 使用json進行前后端數(shù)據(jù)交互赘那。
bug1:
image.png
image.png
提示js資源文件找不到, 函數(shù)未定義证鸥。顯然應(yīng)該是沒有導入js文件或者文件放錯位置了, 可是已經(jīng)放了js文件啊, 一檢查發(fā)現(xiàn)把js文件夾放到web/WEB-INF中了...
所以再次強調(diào), js文件夾/font文件夾/css文件夾都放在web文件夾下, 與WEB-INF同級, WEB-INF文件下一般放lib文件夾, lib中放置jar包酗钞。
bug2: 只顯示"用戶名可用"
在servlet里面回寫數(shù)據(jù)的時候, 用戶名可用的情況時, 把鍵名寫錯了, "msg"寫成了"mag", 在前端取data.msg時自然取出來的就是undefined
bug3: 不同的提示信息顏色不改變
又是鍵名寫錯了, 我真是服了... 把userExist寫成了userExsit...
注意: 此外注意一個編碼問題, 在servlet將map集合轉(zhuǎn)為了json字符串, 然后通過字符輸出流輸出到頁面, 這里實現(xiàn)要設(shè)置中文編碼, 要不然就是問號???
正常代碼
前端: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();
//發(fā)送ajax請求
//期望服務(wù)器響應(yīng)回的數(shù)據(jù)格式：{"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<>();
// 調(diào)用service判斷用戶名是否存在
if("tom".equals(username)){
map.put("userExist", true);
map.put("msg", "此用戶名太受歡迎, 請更換一個");
}else{
map.put("userExist", false);
map.put("msg", "用戶名可用");
}
// 轉(zhuǎn)為json 傳遞給客戶端
ObjectMapper objectMapper = new ObjectMapper();
objectMapper.writeValue(response.getWriter(), map);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
