Ajax+Servlet verify user name exists

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<!--
	1. Import the jQuery library
	2. Get the node username with name = "username"
	3. Add a change response function for username
		3.1 Get the value attribute value of username, remove the leading and trailing spaces and not be empty
		3.2 Send Ajax request to check if username is available
		3.3 Return an html fragment directly on the server side
		3.4 Add it directly to the html of #message in the client browser
 -->
<script type="text/javascript" src ="${pageContext.request.contextPath}/scipts/jquery-2.1.0.js"></script>
<script type="text/javascript">

	$(function(){
		
			$(":input[name = 'username' ]").change(function(){
			var val = $ (this) .val ();
			val = $.trim(val);
			
			if(val != ""){
				var url = "${pageContext.request.contextPath}/valiateUserName";
				var args = {"userName":val , "time": new Date()};
				
				$.get(url, args, function(data){
					$("#message").html(data);
				});
			}
			
		});
	})
</script>
</head>
<body>
	<form action="" method = "post">
		
		userName: <input type = "text" name = "username" placeholder="Search..."/>
		<br><br>
		<div id = "message"></div>
		<br>
		<input type = "submit" value = "Submit" />
		
	</form>
</body>
</html>

ValiateUserNameServlet.java

package com.anqi.ajax.app.servlets;

import java.io.IOException;
import java.util.Arrays;
import java.util.List;

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("/valiateUserName")
public class ValiateUserNameServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

    public ValiateUserNameServlet() {
        super();
    }


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		List<String> userNames = Arrays.asList("AAA", "BBB", "CCC");
		
		String userName = request.getParameter("userName");
		String result = null;
		if(userNames.contains(userName))
			result = "<font color = 'red'>Username already exists</font>";
		else
			result = "<font color = 'green'>Username can be used</font>";
		response.setContentType("test/html");
		response.setCharacterEncoding("UTF-8");
		response.getWriter().print(result);
	}
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}

}

Results display

Expand your knowledge:

The server responds to the HTML format file

<script type="text/javascript" src = "jquery-2.1.0.js"></script>
<script type="text/javascript">
 $(function(){
	 $("a").click(function(){
		 
		 var url = this.href;
		 var args = {"time":new Date};
		 
		 $.get(url,args,function(data){

			 var name = data.name;
			 var website = data.website;
			 var email = data.email;
		 $("#details").empty()
				.append("<h2><a href = 'mailto:"+email+"'>"+name+"</a></h2>")
				.append("<a href = '"+website+"'>"+website+"</a>");
		 },"JSON");
	 });
 })
</script>

<body>
	<h1>People</h1>
	<ul>
		<li><a href = "file/andy.js">Andy</a></li>
		<li><a href = "file/richard.js">Richard</a></li>
		<li><a href = "file/jeremy.js">Jeremy</a></li>
		
		<div id = "details"></div>
	</ul>
</body>

The server responds to an XML format file

$(function(){
		$("a").click(function(){
			
			var url = this.href;
			var args = {"time":new Date()};
			
			$.get(url, args, function(data){
				var name = $(data).find("name").text();
				var website = $(data).find("website").text();
				var email = $(data).find("email").text();
				$("#details").empty()
						.append("<h2><a href = 'mailto:"+email+"'>"+name+"</a></h2>")
						.append("<a href = '"+website+"'>"+website+"</a>");
			});
			
			return false;
		});
	})

The server responds to a JSON format file

$(function(){
	 $("a").click(function(){
		 
		 var url = this.href;
		 var args = {"time":new Date};
		 
		 $.get(url,args,function(data){

			 var name = data.name;
			 var website = data.website;
			 var email = data.email;
		 $("#details").empty()
				.append("<h2><a href = 'mailto:"+email+"'>"+name+"</a></h2>")
				.append("<a href = '"+website+"'>"+website+"</a>");
		 },"JSON");
	 });
 })

Ajax+Servlet verify user name exists

Guess you like