最近在学web前端，发现有些东西特别容易忘。学vue之前想把js(包括一些前端框架)搞熟悉了。
原理就是用户在注册界面输入用户名，当文本框失去焦点后，触发post请求，把文本框里的内容传到服务器，服务器进行校验，将结果返回给前端页面。没有用数据库的知识，username的值直接随便在servlet里定义了一个，就是作为一个新手熟悉前后端数据交互。(其实是把csdn当作笔记本用了hahahahahahaha-------)
在IDEA里，启动了tomcat服务器，把前端页面命名为：“03_用户名校验.html”，后端用的servlet，在com.example.learning_tomcat包下创建个servlet类，类名为UserServlet，话不多说，上代码，注释都在里面。（所有的代码都在下面了）
前端部分：
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="utf-8">
<title>注册-个人中心</title>
//要引入jquery
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function(){
//当用户名框失去焦点时，提交post请求
$("#username").blur(function(){
//获取文本框里面的值
var username = $(this).val();
//post请求
$.post("userservlet",{username:username},function(data){
//期望服务器返回的是{"userExist":true,"msg":"这个用户已经存在了"}这种
if(data.userExist){
$("span").css("color","red");
$("span").html(data.msg);
}else{
$("span").css("color","green");
$("span").html(data.msg);
}
},"json");//这里要注意，最后一个type值是响应结果的类型json
});
});
</script>
</head>
<body>
<!--用了内联的样式随便美化了一下-->
<div style="background-color: pink; margin: 0 auto; height: 200px; width: 420px; padding-top: 70px; border-radius: 20px 20px 20px">
<div style="background-color: peachpuff; height: 120px; width:250px; margin: 0 auto;padding-top: 20px; border-radius: 15px 15px 15px">
<!--就不提交表单了-->
<form >
用名：<input id="username" type="text" name="username" placeholder="请输入用户名"><br>
密码：<input type="password" name="password" placeholder="请输入密码"><br>
<input type="submit" value="注册"><span></span>
</form>
</div>
</div>
</body>
</html>后端部分：
在com.example.learning_tomcat包下创建个servlet类，类名为UserServlet，不在web.xml中配置，servlet3之后都能用注解@WebServlet("/userservlet")
package com.example.learning_tomcat;
//用的jackson的json解析器
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
@WebServlet("/userservlet")
public class UserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
@Override
//重写了post和get方法这里只用post，上面那个get方法不写了，直接调用这里的doGet方法
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取请求到的数据
String username_json = request.getParameter("username");
//设置响应数据的格式
response.setContentType("text/html;charset=utf-8");
//创建自定map，可以自定义对应关系的集合
Map<String,Object> map = new HashMap<String,Object>();
/*
这里就不用数据库了，我们主要来学习ajax
判断用户名是否是pcc
*/
if("pcc".equals(username_json)){
//注册用户名是pcc
map.put("userExist",true);
map.put("msg","这个用户已经存在了");
}else {
//注册用户名不是pcc
map.put("userExist",false);
map.put("msg","用户名可以使用");
}
//创建jackson的核心对象
ObjectMapper mapper = new ObjectMapper();
//将Map转换为json字符串
mapper.writeValue(response.getWriter(),map);
//也可以用下面的方法
// String json = mapper.writeValueAsString(map);
// //将转换好的json响应到客户端浏览器
// response.getWriter().write(json);
}
}启动tomcat服务器，运行结果示例：