通过Ajax实现注册登陆的表单验证，一看就会。
前言：
ajax的简单应用，简单好懂。本次运用的软件为ideal，使用的是tomcat服务器，无框架编程。
AJAX是什么
Asynchronous JavaScript And XML
是一种通过JavaScript和后台进行通信的技术，能够实现页面的局部刷新，提高用户的体验
常规页面刷新会更新整个页面。
ajax技术通过浏览器局部发送请求给后台，后台通过resp.getWriter.print("");响应给前台页面
代码实现：
服务器代码：
一个类写入多个servlet：
package com.dmdd.servlet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;
public class BaseServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String m = req.getParameter("m");
try {
Method method=this.getClass().getDeclaredMethod(m,HttpServletRequest.class,HttpServletResponse.class);
method.setAccessible(true);
method.invoke(this,req,resp);
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req,resp);
}
}
这个类是为了实现多个servlet可写入一个类中，简化了代码的结构，运用了反射技术。看不懂没关系，直接照着抄。
服务器具体实现代码：
package com.dmdd.servlet;
import com.dmdd.entity.User;
import com.dmdd.service.Impl.UserServiceImpl;
import com.dmdd.service.UserService;
import com.dmdd.utils.DBUtilss;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
@WebServlet("/admin.do")
public class AdminServlet extends BaseServlet{
static UserService userService=new UserServiceImpl();
public void checkRegisterUsername(HttpServletRequest req, HttpServletResponse resp) throws IOException {
String username = req.getParameter("username");
List<User> userExists = userService.findUserExists(username);
String regExp = "^[a-zA-Z0-9_-]{4,16}$";
if (!username.matches(regExp)){
resp.getWriter().print("false");
}
else if(userExists!=null&userExists.size()>0){
resp.getWriter().print("exists");
}
else {
resp.getWriter().print("");
}
}
public void checkRegisterPassword(HttpServletRequest req,HttpServletResponse resp) throws IOException {
String password = req.getParameter("password");
String regXp="^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$";
if (!password.matches(regXp)){
resp.getWriter().print("false");
}
else {
resp.getWriter().print("true");
}
}
public void checkRegisterPassword1(HttpServletRequest req,HttpServletResponse resp) throws IOException {
String password = req.getParameter("password");
String password1 = req.getParameter("password1");
if (password.equals(password1)){
resp.getWriter().print("repeat");
}
else {
resp.getWriter().print("");
}
}
public void checkLoginUsername(HttpServletRequest req, HttpServletResponse resp) throws IOException {
String username = req.getParameter("username");
List<User> userExists = userService.findUserExists(username);
if (username==null){
resp.getWriter().print("null");
}
else if(userExists!=null&userExists.size()>0){
resp.getWriter().print("exists");
}
else {
resp.getWriter().print("");
}
}
public void checkLoginPassword(HttpServletRequest req,HttpServletResponse resp) throws IOException {
String password = req.getParameter("password");
String username = req.getParameter("username");
List<User> userExists = userService.findUserExists(username);
if (password==null){
resp.getWriter().print("null");
}
else if(userExists.get(0).getPassword()==password){
resp.getWriter().print("true");
}
else {
resp.getWriter().print("");
}
}
}
浏览器代码：
注册代码：
$(function (){
//给账户对象添加失去焦点事件
$("[name=username]:text").blur(function (){
//连接服务器校验用户名
$.get("/front/admin.do?m=checkRegisterUsername&username="+$(this).val(),function (data){
if (data=="false"){
$("#userMsg").text("请输入正确格式的用户名").css("color","red");
}
else if (data=="exists"){
$("#userMsg").text("此用户已存在").css("color","red");
}
else {
$("#userMsg").text("符合").css("color","green");
}
})
})
$("[name=password]:password").blur(function (){
//连接服务器
$.get("/front/admin.do?m=checkRegisterPassword&password="+$(this).val(),function (data){
if (data=="false"){
$("#passwordMsg").text("密码格式错误").css("color","red");
}
else if (data=="true"){
$("#passwordMsg").text("√").css("color","green");
}
})
})
$("[name=password1]:password").blur(function (){
$.get("/front/admin.do?m=checkRegisterPassword1&password1="+$(this).val()+"&password="+$("[name=password]:password").val(),function (data){
if (data=="repeat"){
$("#passwordMsg1").text("√").css("color","green")
}
else {
$("#passwordMsg1").text("密码不一致").css("color","red")
}
})
})
})$.get("/front/admin.do?m=checkRegisterPassword&password="+$(this).val()此段写 要请求的servlet地址。 get请求是把需要的参数按照如下形式传递
？参数1&参数2&参数3
登陆代码：
<script>
$(function () {
$("[name=username]:text").blur(function () {
$.get("/front/admin.do?m=checkLoginUsername&username=" + $(this).val(), function (data) {
if (data == "null") {
$("#usernameMsg").text("用户名不能为空").css("color", "red");
} else if (data == "exists") {
$("#usernameMsg").text("√").css("color", "green");
} else {
$("#usernameMsg").text("用户名不存在").css("color", "red");
}
})
})
$("[name=password]:password").blur(function () {
$.get("/front/admin.do?m=checkLoginPassword&password=" + $(this).val() + "&username=" + $("[name=username]:text").val(), function (data) {
if (data == "null") {
$("#passwordMsg").text("密码不能为空").css("color", "red");
} else if (data == "true") {
$("#passwordMsg").text("√").css("color", "green");
} else {
$("#passwordMsg").text("密码错误").css("color", "red");
}
})
})
})
</script>至于为什么要用jquery写，因为jquery写ajax最简单
效果图：
