前一段时间在备考开学考试，关于javaweb的编程题了解到会考到jquery+ajax前后端交互的问题，于是上网找了很多资料，整理出这篇笔记，最后代码也成功运行，希望可以给备考的宝宝们提供一些帮助。
我们考试的题：
使用jquery+ajax完成注册时的用户名验证，要求如下：
前端验证用户名是否合法，账号只能是长度4-12位的数字、字母、下划线
如果用户名合法，通过ajax访问后台验证用户名是否已存在，并给前台作出相应的提示
如果用户名不合法或者已存在，点击注册按钮无法提交表单。
项目目录如下：
创建Servlet并将servlet配置写入web.xml,这里的servlet-name是check根据自己的命名来写
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<servlet>
<servlet-name>check</servlet-name>
<servlet-class>com.labor.servlet.CheckUserNameServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>check</servlet-name>
<url-pattern>/check</url-pattern>
</servlet-mapping>
</web-app>在web下创建一个包导入JS包，并且编写register.jsp前端页面以及ajax数据代码块：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>AJAX实际操作注册验证用户名</title>
</head>
<body>
<form action="" method="post">
账号：<input type="text" id="username" name="username"><span id="sp"></span><br>
<input type="submit" value="注册">
</form>
<script src="JS/jquery.min.js"></script>
<script>
//给账号的文本框添加失去焦点事件 使用jquery绑定 input[name='username']
$("input[name='username']").blur(function () {
//获得用户输入的账号 账号只能是长度4-12位的数字、字母、下划线
let username = $(this).val(); //let与var用法一致 获取输入的username
//账号只能是长度4-12位的数字、字母、下划线
let reg = /^\w{4,12}$/;
if(!reg.test(username)){
alert("用户名不合法!");
return;//return可以结束掉整个方法
}
//验证用户名是否合法，如果用户名合法，这个函数返回true,否则返回false
function checkUsername() {
}
//给账号的文本框添加失去焦点事件
$("input[name='username']").blur(checkUsername)
//表单的提交事件，如果这个方法返回的是true，就可以提交表单，否则提交不了
$("form").submit(function () {
//如果用户名合法，才提交表单
let b = checkUsername();
return b;
})
//要页面不刷新去访问后台 要使用ajax
let b = true;
$.ajax({
url:"check", //后台的action 在web.xml中 验证的Servlet路径
type:"POST", //以post方法提交数据给服务器
data:{ //传给服务器的数据
"Mark":username,
}, //"mark"为要向后台传入的参数名称
//将异步请求改为同步
async:false,
//如果正常的访问了后台，就执行这个success中的function函数
success:function (obj) { //回调函数
if(obj == "1"){
$("#sp").text('用户名已存在').css("color","red");
//在ajax中return是不会返回值得，而是结束掉整个ajax
b = false;
}else{
$("#sp").text('√用户名通过验证').css("color","green");
location.href='success.jsp';
}
},
})
//用户名合法，就要去该账户中验证用户名是否存在
//要去数据库进行操作，肯定就要写Java代码，Java代码写在servlet中
//要页面不刷新去访问后台，要使用ajax
//异步 同步
// location.href=''
});
</script>
</body>
</html>编写一个success.jsp登录成功跳转的页面：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
登录成功！
</body>
</html>最后编写CheckUserNameServlet.java来接受前端数据作比较,先接收前端传过来的数据（用户名）与后端已存在的用户名作比较：
package com.labor.servlet;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;
import static java.lang.System.out;
/*使用jquery+ajax完成注册时的用户名验证，要求如下：
前端验证用户名是否合法，账号只能是长度4-12位的数字、字母、下划线
如果用户名合法，通过ajax访问后台验证用户名是否已存在，并给前台作出相应的提示
如果用户名不合法或者已存在，点击注册按钮无法提交表单。
*/
@WebServlet(name = "check", urlPatterns= "/check")
public class CheckUserNameServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//接受前端传进来的数据，即刚刚的data
String username = request.getParameter("Mark").toString();
PrintWriter out = response.getWriter();
String is_name = "Mark";
if(is_name.equals(username)){
out.print("1");
}else{
out.print("2");
}
out.close();
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
运行结果：
输入已经存在的用户名，会提示用户名已存在并且不会跳转页面
少于4个多于12个的用户名长度会弹出提示框：用户名不合法
登录成功跳转页面
谢谢大家的浏览。
希望这篇文章可以帮助到大家。
