Ajax-验证用户是否可用

缺乏、安全感 2022-03-15 13:48 241阅读 0赞

今天在b站上学习了一下如何用Ajax来验证用户是否可用（没有连接数据库）。因为之前在学习JavaScript和JavaWeb时，基础不是很好，所以有些语法格式都不记得了。接下来就是代码了。

**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>
    
    
     <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery.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";//新建servlet时，映射路径要与此路径相同 var args ={ "userName":val,"time":new Date()}; $.post(url,args,function(data){ $("#message").html(data); //将请求的内容放到 #message中 }); } }); }) </script>
    </head>
    <body>
    	<form action="" method="post">
    	
    		UserName:<input type="text" name="username"/>
    		<br><br>
    		<div id="message"></div>
    		<br><br>
    		<input type="submit" value="Submit"/>
    	
    	</form>
    </body>
    </html>

然后新建一个Servlet  
    **ValiateUserNameServlet.java**

package com.jmi.ajax.app.servlet;
    
    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;
    
    /** * Servlet implementation class ValiateUserNameServlet */
    @WebServlet("/valiateUserName")
    public class ValiateUserNameServlet extends HttpServlet { 
    	private static final long serialVersionUID = 1L;
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    		
    	}
    
    	/** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */
    	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("text/html ; charset=utf-8");
    		response.setCharacterEncoding("UTF-8");
    		response.getWriter().print(result);  //将result返回至data中
    	}
    
    }

最后这是页面的效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 1]  
    学的并不是很好，若大家有任何疑问或是不解的话，请在下方评论，谢谢。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]: /images/20220315/be3b2f98afa84becbb1733dae7e59289.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 1]: /images/20220315/b4236b482325463e9e90cf9f1b2ce222.png