项目结构
网页代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
function check_username(val){
$.ajax({
type: "POST",
url: "check", //看下面xml的配置
data: "username="+val, //形成一对key-value,提交对象可以通过request.getParameter("username");获得val值
success: function(data){ //提交成功后调用的方法
if(data=="false"){//后台返回表示重名
$("#span").html("X");
}
else if(data=="true"){
$("#span").html("√");
}
}
//error://提交失败将调用的方法
});
}
</script>
</head>
<body>
<input type="text" id="username_input" name="username" placeholder="Username" onblur="check_username(this.value);">
<span id="span"></span>
</body>
</html>
Servlet层方法
package com.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class UsernameCheck extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setHeader("Content-type", "text/html;charset=UTF-8");
response.setCharacterEncoding("utf-8");
request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
//此处可以将username为参数,通过service调用do层方法,传回是否为重名
boolean result = false;//具体后台方法,此处演示Ajax异步提交以一个值代替
if(result) {
response.getWriter().print(true);
}
else
response.getWriter().print(false);
response.getWriter().close();
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req, resp);
}
}
XML配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<servlet>
<servlet-name>CheckName</servlet-name>
<servlet-class>com.servlet.UsernameCheck</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CheckName</servlet-name>
<url-pattern>/check</url-pattern>
</servlet-mapping>
</web-app>
大致实现效果