注册网站时用户名是否存在是如何校验的？---用AJAX来分析一波

最新推荐文章于 2022-03-22 21:34:20 发布

鹏鹏哥哥的小红帽

最新推荐文章于 2022-03-22 21:34:20 发布

阅读量242

点赞数

文章标签：用户名校验 Json Ajax 异步

本文链接：https://blog.csdn.net/kepengs/article/details/108099656

版权

前置

同步：浏览器发送一次请求，刷新一次页面

异步：浏览器可以在不刷新整个页面的基础上，仅用JavaScript来实现某一部分的刷新，并且不影响页面其他部件的操作

实现技术

AJAX

代码案例

1、前台注册页面

要点：

1、使用JQuery的Ajax，引入JQuery库

2、写一个用户名输入的<input>，用JQuery在其失去焦点的时候将其name值username，存入一个叫做username的parameter中，用get的方式推送到服务器findUserServlet上，之后获取回调函数的传回的服务器data

3、根据服务器data用JavaScript展示页面数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
    <script src="js/jquery-3.3.1.min.js"></script>

    <script>
        $(function () {
            $("#username").blur(function () {
                var username = $(this).val();
                $.get("findUserServlet",{username:username},function (data) {
                    var span = $("#s_username");
                    if (data.userExsit){
                        span.css("color","red")
                        span.html(data.msg)
                    }else {
                        span.css("color","green")
                        span.html(data.msg)
                    }
                },"json")
            })
        })
    </script>

</head>
<body>

<form>
    <input id="username" type="text" name="username" placeholder="请输入用户名"><br/>
    <span id="s_username"></span><br/>
    <input type="submit" value="注册"><br/>
</form>

</body>
</html>

2、服务器校验

要点：

1、response设置json数据格式

2、用Map封装校验结果和返回值信息

3、把封装的信息用Json解析器封装成json格式返回给前端

package com.hisense.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;

/**
 * @author : sunkepeng E-mail:sunkepengouc@163.com
 * @date : 2020/8/19 13:44
 */
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        response.setContentType("application/json;charset=utf-8");
        Map<String,Object> map = new HashMap<>();
        if ("hisense".equals(username)){
            map.put("userExsit",true);
            map.put("msg","Already");
        }else {
            map.put("userExsit",false);
            map.put("msg","Can Use");
        }
        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(response.getWriter(),map);
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}