杨校老师课堂之使用Ajax校验用户名是否可用

太过爱你忘了你带给我的痛 2022-04-25 08:34 137阅读 0赞

**目录**

效果

导包

页面代码：

Servlet代码：

下载

--------------------

### 效果 ###

![2019070909105015.png][]

### 导包 ###

需要导入 jar包有：

![20190708170029322.png][]

下载地址：

链接：https://pan.baidu.com/s/1X0IEzRNMpKQG8ZmwX2jAKw 
    提取码：uyg6 
    复制这段内容后打开百度网盘手机App，操作更方便哦

###  页面代码： ###

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>使用Ajax校验用户名是否可用</title>
        <script src="js/jquery-1.7.2.min.js"></script>
       
    </head>
    <body>
        <form>
            <input type="text" id="username" name="username" placeholder="请输入用户名">
            <span id="span_username"></span>
            <br/>
            <input type="password" name="password" placeholder="请输入密码"><br>
            <input type="submit" value="戳我来注册"><br>
        </form>
    
    </body>
    </html>
    <script>
            //在页面加载完成后
            $(function () {
               //给username绑定blur(失焦)事件 | 光标离开username区域后
               $("#username").blur(function () {
                   //获取username文本输入框的值
                   var username = $(this).val();
                   //发送ajax请求
                       //如果可用则显示:"此用户名太受欢迎,请更换一个"
                       //如果不可用则:"用户名可用"
                    $.get("showUserServlet",{username:username},function (data) {
    					   var span = $("#span_username");
    					   if(data.userExsit){
    						   //用户名存在
    						   span.css("color","red");
    						   span.html(data.msg);
    					   }else{
    						   //用户名不存在
    						   span.css("color","green");
    						   span.html(data.msg);
    					   }
    				   });
               }); 
            });
    </script>

### Servlet代码： ###

package cn.javabs.web.servlet;
    
    import com.fasterxml.jackson.databind.ObjectMapper;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.util.HashMap;
    import java.util.Map;
    /**
     * 基于IDEA开发工具 | 并使用Servlet的3.0技术、可省略web.xml中映射代码的编写
     *@author：Mr.yang
     *
     */
    @WebServlet("/showUserServlet")
    public class ShowUserServlet extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           
    	   // 1. 设置响应的数据格式为json并且设置编码为utf-8
            response.setContentType("application/json;charset=utf-8");
    		
    		// 2. 获取用户名
            String username = request.getParameter("username");
    
            // 3. 调用service层判断用户名是否存在
            Map<String,Object> map = new HashMap<String,Object>();
    
            if("wangcai".equals(username)){
                //若用户名为“wangcai”存在
                map.put("userExsit",true);
                map.put("msg","此用户名太受欢迎,请更换一个");
            }else{
                //若用户名为“wangcai”不存在
                map.put("userExsit",false);
                map.put("msg","用户名可用");
            }
    
            // 4.将map转为json，并且传递给客户端
    			// 4.1 将map转为json
    			ObjectMapper mapper = new ObjectMapper();
    			// 4.2 并且传递给客户端
    			mapper.writeValue(response.getWriter(),map);
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// 调用doPost方法，实现代码的复用性	
    	   this.doPost(request, response);
        }
    }

### 下载 ###

[代码托管][Link 1]：

[https://github.com/yangsir1688/ajax-checkRepeatName][Link 1]

[2019070909105015.png]: /images/20220125/0b72269c96ad4731b43f044b7ac31f87.png
[20190708170029322.png]: /images/20220125/b34f7e54eb684289bb798517d91bf32d.png
[Link 1]: https://github.com/yangsir1688/ajax-checkRepeatName