Ajax+Servlet 验证用户名是否存在

最新推荐文章于 2022-05-07 22:30:00 发布

海向

最新推荐文章于 2022-05-07 22:30:00 发布

阅读量1.1k

点赞数 2

分类专栏： JavaEE是怎样炼成的

本文链接：https://blog.csdn.net/baidu_37181928/article/details/79329444

版权

JavaEE是怎样炼成的专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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. 导入 jQuery 库
	2. 获取 name = "username" 的节点 username
	3. 为 username 添加 change响应函数
		3.1 获取 username 的 value 属性值，去除前后空格且不为空
		3.2 发送 Ajax 请求检验 username 是否可用
		3.3 在服务端直接返回一个 html 片段
		3.4 在客户端浏览器把其直接添加到 #message 的 html 中
 -->
<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'>用户名已经存在</font>";
		else
			result = "<font color = 'green'>用户名可以使用</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);
	}

}

结果展示

拓展知识：

服务端响应的是 HTML 格式文件

<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>

服务端响应的是 XML 格式文件

$(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;
		});
	})

服务端响应的是 JSON 格式文件

$(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");
	 });
 })

海向

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
Ajax+Servlet 验证用户名是否存在

index.jsp&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4
复制链接

扫一扫