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

目录结构

没有涉及到数据库

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. Win10系统安装VMware-viclient-6.0无响应问题解决方法

    背景:笔记本重做系统升级至Win10系统后,由于工作需要,得安装VMware-viclient-6.0软件进行远程连接. 问题:没有出现网上那种各种报错情况,只是在点击“安装”按钮的时候没弹出任何等待 ...

  2. 0.9.0.RELEASE版本的spring cloud alibaba nacos+feign实例

    这里的feign依然是原来的feign,只不过将注册中心由eureka换成了nacos.服务提供方参见0.9.0.RELEASE版本的spring cloud alibaba nacos实例,消费方跟 ...

  3. java如何压缩多个文件到压缩包，并下载到浏览器？

    java压缩多个文件到压缩包,并下载到浏览器   解决方法: 完整的方法如下,很简单,亲试有效,极力推荐. 我是以流作为文件,而不是file,循环把所有pdf文件压缩到pdf.zip压缩包中. 1.前 ...

  4. Qt编写自定义控件43-自绘电池

    一.前言 到了9102年了,现在智能手机不要太流行,满大街都是,甚至连爷爷奶奶级别的人都会用智能手机,本次要写的控件就是智能手机中的电池电量表示控件,采用纯painter绘制,其实也可以采用贴图,我估 ...

  5. spark的task调度器(FAIR公平调度算法)

    FAIR  调度策略的树结构如下图所示: FAIR 调度策略内存结构 FAIR 模式中有一个 rootPool 和多个子 Pool, 各个子 Pool 中存储着所有待分配的 TaskSetMagage ...

  6. MySQL设置可以远程连接

    在MySQL命令行执行如下: use mysql; grant all privileges on *.* to root@'%' identified by "password" ...

  7. CentOS 7中安装和配置Promethues

    Prometheus 是什么? Prometheus是一套开源的监控&报警&时间序列数据库的组合,起始是由SoundCloud公司开发的.随着发展,越来越多公司和组织接受采用Prome ...

  8. WebGL半透明物体的绘制

    WebGL 中当透明和半透明物体共存时,相关设置不正确的话,物体表面会出现破碎杂乱的断面,非常影响效果,我们接着就来解决这个问题. 完成的展示Demo请看: 半透明物体和透明物体共存 α 混合 让物体 ...

  9. React中的setState到底发生了什么？

    https://yq.aliyun.com/ziliao/301671 https://segmentfault.com/a/1190000014498196 https://blog.csdn.ne ...

  10. Rhino脚本引擎技术介绍

    引用:http://p.primeton.com/articles/54c1e255be20aa4735000001 http://blog.csdn.net/u013292493/article/d ...