只是简单的仿某度注册的用户名输入离焦后检验

目录结构

没有涉及到数据库

html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>校验用户名是否存在</title>

    <script src="js/jquery-3.3.1.min.js"></script>

    <script>

        //页面加载完成后

        $(function () {

            //给用户名输入框定义一个离焦事件

            $("#username").blur(function () {

                //获取文本输入框的值

                var username=$(this).val();

                /* 期望服务器端响应回来的数据格式是这样的（json）:

                        {"userExit":true,"msg":"此用户太受欢迎，请换一个"}

                        {"userExit":false,"msg":"用户名可用"}

                 */

                $.get("findUsernameServlet",{username:username},function (data) {

                    alert(data.msg);

                    var span = $("#s_username")

                    //判断响应回来的数据的键userExit是否为true

                    if (data.usernameExsit){

                        //true 用户名存在

                        span.css("color","red");

                        span.html(data.msg);

                    } else {

                        //false  用户名不存在

                        span.css("color","green");

                        span.html(data.msg);

                    }

                },"json");

            });

        });

    </script>

</head>

<body>

    <form action="" method="get">

        <input type="text" id="username" name="username" placeholder="请输入用户名">

        <span id="s_username"></span><br>

        <input type="password" name="password" placeholder="请输入密码"><br>

        <input type="submit" value="注册">

    </form>

</body>

</html>
java servlet
@WebServlet("/findUsernameServlet")

public class FindUsernameServlet extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");

        String username = request.getParameter("username");

        response.setContentType("application/json;charset=utf-8");

        Map<String,Object> map=new HashMap<>();

        /*判断浏览器客户端传过来的数据  username

           true   {"userExit":true,"msg":"此用户太受欢迎，请换一个"}

           false    {"userExit":false,"msg":"用户名可用"}

             */

        if ("tom".equals(username)){

            map.put("usernameExsit",true);

            map.put("msg","此用户太受欢迎，请换一个");

        }else {

            map.put("usernameExsit",false);

            map.put("msg","用户名可用");

        }

        //java:map-->json

        ObjectMapper mapper=new ObjectMapper();

        mapper.writeValue(response.getWriter(),map);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        this.doPost(request, response);

    }

}

校验用户名是否存在(ajax+jackson)的更多相关文章

  1. Ajax详解及其案例分析------如何获得Ajax对象，使用Ajax对象发送GET和POST请求，校验用户名，POST和GET请求时的乱码处理，实现级联的下拉列表

    本节主要内容预览: 1 获得Ajax对象 2 使用Ajax对象发送GET请求 3 使用Ajax对象发送POST请求 4 使用Ajax校验用户名 5 POST请求时的乱码处理 6 GET请求时的乱码处理 ...

  2. ajax案例_校验用户名

    目录 ajax案例_校验用户名 代码下载 需求 流程 搭建环境 开发代码 1_jsp 1_servlet 1_service.dao 2_servlet 2_jsp 测试后,功能实现,完结撒花 aja ...

  3. 十七 Ajax&校验用户名功能

    Ajax: 即"Asynchronous JavaScript And XML", 异步JavaScript和XML , 是指一种创建的交互式页面应用的网页开发技术,它并不是新的技 ...

  4. 零基础学习java------35---------删除一个商品案例，删除多个商品，编辑（修改商品信息），校验用户名是否已经注册（ajax）

    一. 删除一个商品案例 将要操作的表格 思路图  前端代码 <%@ page language="java" contentType="text/html; cha ...

  5. 【JAVAWEB学习笔记】22_ajax：异步校验用户名和站内查询

    Js原生Ajax和Jquery的Ajax 学习目标 案例1-异步校验用户名是否存在 案例2-站内查询 一.Ajax概述 1．什么是同步,什么是异步 同步现象:客户端发送请求到服务器端,当服务器返回响应 ...

  6. day78_淘淘商城项目_11_单点登录系统实现 + 用户名回显 + ajax请求跨域问题详解_匠心笔记

    课程计划 1.SSO注册功能实现 2.SSO登录功能实现 3.通过token获得用户信息 4.ajax跨域请求解决方案--jsonp 1.服务接口实现   SSO系统就是解决分布式环境下登录问题的,本 ...

  7. 案例16-validate自定义校验规则校验用户名是否存在

    1 知识点 2 register.jsp代码 注意自定义校验规则的时候,提交必须是同步的方式. <%@ page language="java" contentType=&q ...

  8. JQuery去实现校验用户名

    JQuery 是什么? javascript 的代码框架. 有什么用? 简化代码,提高效率. 核心 write less do more , 写得更少,做的更多. load //找到这个元素, 去执行 ...

  9. Python校验用户名是否合法示例

    #校验用户名是否合法例子: #输入账号密码 #input #如果账号存在提示已经注册,如果不存在的,就可以注册 all_users [] #不能为空 #strip() #用户名长度6-12之间 #le ...

随机推荐

  1. ElasticSearch 6 安装、下载

    1,安装配置JDK 8 参考:官方文档 #为什么是JDK1.8?在ElasticSearch6.2.4中提到:JDK版本必须为:1.8.0_131 以上 > 1,安装JDK1.8-161 #解压 ...

  2. Java开发中使用sort排序

    Java开发中使用sort排序 BaiduSpring https://baijiahao.baidu.com/s?id=1625440912158830354&wfr=spider& ...

  3. Qt编写控件属性设计器3-拉伸控件

    一.前言 插件控件加载了,拖曳控件也实现了,接下来就是一个最难点了,跟QtDesigner或者其他开发环境一样,能够任意自由的拉伸控件大小,移动位置,为了这个功能,还特别编写了一个控件来实现这个功能, ...

  4. Rust基础笔记：闭包

    语法 Closure看上去是这样的: let plus_one = |x: i32| x + 1; assert_eq!(2, plus_one(1)); 首先创建一个绑定plus_one,然后将它分 ...

  5. SpringMVC+Ajax实现文件批量上传和下载功能实例代码

    需求: 文件批量上传,支持断点续传. 文件批量下载,支持断点续传. 使用JS能够实现批量下载,能够提供接口从指定url中下载文件并保存在本地指定路径中. 服务器不需要打包. 支持大文件断点下载.比如下 ...

  6. SQL Server 2008 R2如何使用正则表达式搜索

    正则表达式是简明而灵活的表示法,用于查找和替换各种模式的文本.在 SQL Server Management Studio 的“查找和替换”对话框中的“查找内容”字段中,可以使用一组特定的正则表达式. ...

  7. 一个区分度很大的iOS面试题

    @property 后面可以有哪些修饰符?@property中有哪些属性关键字? 属性可以拥有的特质分为四类: 原子性--- nonatomic 特质 在默认情况下,由编译器合成的方法会通过锁定机制确 ...

  8. AD19如何单独设置单个焊盘与铜皮的连接方式

    我们用过Altium Designer做设计的人都知道,Altium中有个强大的规则管理器,由于功能太多这里就先不介绍,有需要可以留言,今天的主题是讲解AD19的新功能,快速给单个焊盘设置与铜皮的连接 ...

  9. webkit浏览器下改变滚动条样式

    /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); ba ...

  10. 读取json数据封装

    前言:做自动化常用公共方法 import json class ReadJson(): def __init__(self): self.data = self.read_data() #读取JSON ...