打开 eclipse 创建如下 动态网页 如下图所示:
dologinServlet.java 代码如下:
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/login")
public class dologinServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
//获取url请求中对应的username
String username=request.getParameter("username");
String opr=request.getParameter("opr");
if(opr.equals("checkUsername")) {
//模拟调用三层,验证用户名是否存在
if(username.equals("admin")) {//存在
out.print("exist");
}else {//不存在
out.print("noexist");
}
}
//关闭资源
out.flush();
out.close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
doGet(request, response);
}
}
login.js 代码如下:
$(function(){
//发送ajax请求
$("#username").blur(function(){
//获取用户名
var username=$(this).val();
console.log(username);
//参数较多的情况,可以简化data的拼接
var params=new Object();//创建js对象
params.username=username;
params.opr="checkUsername";
$.ajax({
"url":ctx+"/login",
"type":"POST",
"data":params,
"dataType":"text",
"success":function(result){
if(result=="exist"){//存在
$("#spanInof").html("用户名已被使用,我滴个神");
}else{//不存在
$("#spanInof").html("用户名可以使用");
}
},
"error":function(){
console.log("发生错误");
}
});
});
})
dologin.jsp 代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax验证用户名是否可用</title>
<script>
var ctx="${pageContext.request.contextPath}";
</script>
</head>
<body>
<form action="#" method="post">
<table>
<tr>
<td>用户名:</td>
<td>
<input type="text"name="username" id="username" />
<span id="spanInof"></span>
<font color="#coofff">*</font>
</td>
</tr>
</table>
</form>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/login.js"></script>
</body>
</html>