Ajax验证用户名是否已经存在.

最新推荐文章于 2022-01-13 18:01:14 发布

wchb1990

最新推荐文章于 2022-01-13 18:01:14 发布

阅读量340

点赞数

分类专栏：前台技术

本文链接：https://blog.csdn.net/wchb1990/article/details/40320463

版权

前台技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

涉及到2部分代码,一部分是前台页面的代码,另一部分是Servlet代码.

前台JSP代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

    <title>APP!</title>
    <script type="text/javascript" src="${pageContext.request.contextPath }/scripts/jquery-2.1.1.js"></script>
    <script type="text/javascript">
    /*
       1.导入jQuery库.
       2.获取name = "username"的节点:username
       3.为username添加change响应函数.
         1)获取username的value属性值,去除空格后且不为空,准备发送Ajax请求.
         2)发送Ajax请求检验username是否可用.
         3)在服务器直接返回一个HTML的片段.
         4).在客户端浏览器把其直接添加到#message的html中.
         
     */
    	 $(function(){
    		 $(":input[name = 'username']").change(function(){
    			 var val = $(this).val();
    			 val = $.trim(val);
    			 if(val!=""){
    				 var url="${pageContext.request.contextPath}/servlet/valiateUserName";
    			     var args = {"username":val,"time":new Date()}; 
    			     $.post(url,args,function(data){
    			    	$("#message").html(data); 
    			     });
    			 }
    		 });
    	 });
    	
    </script>
 
</head>
  
  <body>
    <form action="" method="post">
    	UserName:<input type="text" name="username"/>
    	<br/>
    	<div id="message"></div>
    	<br/>
    	<input type="submit" value="Submit"/>
    </form>
  </body>
</html>

后台的Servlet代码

package cn.itcast.servlet;

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

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class valiateUserName extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
         List<String> userNames = Arrays.asList("AAA","BBB");
	     String userName = request.getParameter("username");
	     String result = null;
	     if(userNames.contains(userName)){
	    	 result ="<font color='red'>该用户已经被使用</font>";
	     }else{
	    	 result = "<font color='black'>该用户可以使用</font>";
	     }
	     response.setCharacterEncoding("UTF-8");
		 response.setContentType("text/html;charset=UTF-8");
	     response.getWriter().print(result);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		doGet(request, response);
	}
}