杨校老师课堂之使用Ajax校验用户名是否可用-阿里云开发者社区

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

2024-06-20 8

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

效果

导包

需要导入 jar包有：

下载地址：

链接：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);
    }
}