Ajax json 简单验证用户名是否可用

最新推荐文章于 2022-12-04 13:36:26 发布

huangshaohui00

最新推荐文章于 2022-12-04 13:36:26 发布

阅读量202

点赞数 1

文章标签： ajax json servlet

本文链接：https://blog.csdn.net/qq_51307593/article/details/125881239

版权

该篇文章简单介绍
Ajax 实现验证用户名字是否可以用的功能，利用这个原理对后面项目的登录和注册功能做基础。

servlet 页面
获取用户输入的值
将字符串判断发送到前端页面

package com.powernode.servlet;

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;

@WebServlet("/checkusername")
public class CheckUserNameServlet  extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        System.out.println("ajax请求到达servlet...");

        resp.setContentType("text/html;charset=utf-8");

        String username = req.getParameter("username"); //获取用户输入的值

        if(username.equals("admin")){
            resp.getWriter().print("×用户名被占用");
        }else{
            resp.getWriter().print("√用户名可以使用");
        }
    }
}

前端页面
接受servlet发送过来的字符串，并且对字符串进行判断，添加焦点事件实现，正确，字体颜色显示绿色，错误，字体颜色显示红色。


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
    <form action="wait">
        账号:<input type="text" name="abc"/>
        <span id="username_msg"></span>
        <br/>
        密码:<input type="password" name="pwd"/><br/>
        年龄:<input type="text" name="nl"/><br/>
        <input type="submit" value="提交"/>
    </form>

    <script>
        //给账号添加焦点失去事件  第一个input 标签节点
        document.getElementsByTagName('input')[0].onblur = function (){
            //1.创建 XmlHttpRequest 对象。
            var xhr = new XMLHttpRequest();
            /*
               2. 设置请求参数以及访问的方式。
                参数：
                    1.请求方式
                    2.请求地址  这里用的是servlet
                    3.请求类型【默认是true】
            */
            xhr.open('post','checkusername',true);
            /*
               3. 设置请求头
                http的规定，使用 XMLHttpRequest 对象发送请求
                如果请求方式是post，那么必须设置请求头。固定的，无须背。
            */
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

            /*
                4.绑定回调函数。服务器在响应时会触发该函数。
            */
            xhr.onreadystatechange = function (){
                /*
                    readyState：服务器与浏览器之间的通讯状态
                        4：浏览器已经完全接收服务器返回的所有数据。
                    status：服务器返回的状态码。
                        200：服务器响应成功。
                 */
                if(xhr.readyState == 4 && xhr.status == 200){
                    /*
                        responseText：响应文本  String类型   两种，被占用和可以使用
                     */
                    let rest = xhr.responseText;
                    //根据id找到用户名的提示标签
                    let span = document.getElementById('username_msg');

                    //设置提示信息内容  写入span标签
                    span.innerText = rest;

                    //判断 给字体添加颜色 ,这里因为是类c 语言 ，如果不加trim() 函数，会判断错误，因为c语言中字符串是\n结束的
                    if(rest.trim() == "×用户名被占用"){
                        span.style.color = "red";
                    }else{
                        span.style.color = "green";
                    }
                }
            }
            /*
            * 5. 发生到请求到服务器
            * */
            xhr.send("username="+this.value);

        }
    </script>


  </body>
</html>

无须提交页面，在账号栏失去焦点时，Ajax 就会提示我们用户名是否可用

实现前后端分离。
在这里插入图片描述

huangshaohui00

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax json 简单验证用户名是否可用

接受servlet发送过来的字符串，并且对字符串进行判断，添加焦点事件实现，正确，字体颜色显示绿色，错误，字体颜色显示红色。//判断给字体添加颜色,这里因为是类c语言，如果不加trim()函数，会判断错误，因为c语言中字符串是\n结束的。Ajax实现验证用户名字是否可以用的功能，利用这个原理对后面项目的登录和注册功能做基础。http的规定，使用XMLHttpRequest对象发送请求。如果请求方式是post，那么必须设置请求头。2.设置请求参数以及访问的方式。...
复制链接

扫一扫