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

目录结构

没有涉及到数据库

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. mysql数据库分库分表(Sharding)（转）

    mysql数据库切分 前言 通过MySQLReplication功能所实现的扩展总是会受到数据库大小的限制.一旦数据库过于庞大,尤其是当写入过于频繁,非常难由一台主机支撑的时候,我们还是会面临到扩展瓶 ...

  2. OneDrive

    OneDrive https://onedrive.live.com

  3. Function mysql_db_query() is deprecated 错误解决

    方法一:@ 在任何错误语句之前加上@符号,即可屏蔽! 方法二:error_reporting 在PHP文件第一行加上:error_reporting(0); 即可屏蔽! 方法三:display_err ...

  4. 013-多线程-基础-Fork/Join框架、parallelStream讲解

    一.概述 Fork/Join框架是Java7提供了的一个用于并行执行任务的框架, 是一个把大任务分割成若干个小任务,最终汇总每个小任务结果后得到大任务结果的框架. 它同ThreadPoolExecut ...

  5. Eclipse中修改某个java项目的jdk版本【我】

    Eclipse中修改某个项目的jdk版本,主要有下面4个地方 右键项目名,有如下3个地方 另外如果要在Tomcat中运行,还可能需要设置运行这个项目的Tomcat的容器的 jdk 版本,设置方式:

  6. Mysql开启审计功能

    第一种经验证,有效. 第一种用macfee的mysql审计插件. 下载地址:https://bintray.com/mcafee/mysql-audit-plugin/release/1.1.4-72 ...

  7. AWS 云产品 CloudFront + ELB + EC2 + S3 构建虚拟主机动+静分离站点

    目录 一.架构图 二.实现步骤 2.1.EC2 配置 2.2.ELB 设置 2.2.1.创建目标组 2.2.2.创建负载均衡器 2.3.S3 设置 2.4.CloudFront 分配 2.4.1.创建 ...

  8. 最新 边锋网络java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.边锋网络等10家互联网公司的校招Offer,因为某些自身原因最终选择了边锋网络.6.7月主要是做系统复习.项目复盘.Leet ...

  9. 解决Error: Can't find Python executable "python", you can set the PYTHON env variable

    在执行 yarn start时遇到问题, 最后一行提示 Run `npm rebuild node-sass` to download the binding for your current env ...

  10. python微信服务号关注授权、消息推送流程

    阅读目录 推送的方式: 微信推送的流程: 流程分析: 给用户推送消息功能 推送的方式: 短信推送(第三方) 邮件推送 微信推送 公众号:认证的公众号(个人的认证公众号每天只能发一篇文章),粉丝可以跟公 ...