Ajax+jquery实现异步验证用户名功能

标签: 框架  ajax  jquery  html

页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
</head>
<body>
<script>
    function checkUser() {
        $.post({
            url:"${pageContext.request.contextPath}/user/registerAjaxCheck",
            data: {'name':$('#username').val()},
            success:function (data) {

             if (data.toString()==='OK'){
                 $('#info').css("color","blue");
                 $('#info').html("用户名可以注册");
             }else if (data.toString()==='null'){
                 $('#info').css("color","red");
                 $('#info').html("用户名不能为空");
             } else {
                 $('#info').css("color","red");
                 $('#info').html("用户名已存在");
             }

            }
        });
    }
</script>
<form action="${pageContext.request.contextPath}/user/insertUser" method="post" class="form-horizontal">
    <div style="height: 20%"></div>
    <div style="width: 80%;align-content: center" >
        <div style="width: 100%;align-content: center;height: 30px;">
            <span id="info" style="margin-left: 20%">${msg2}</span>
        </div>
        <div class="form-group" >

            <label  class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10">
                <input  onblur="checkUser()"
                        id="username"
                        style="width: 30%" type="text" class="form-control"  placeholder="输入用户名" name="userName">
            </div>
        </div>
        <div style="width: 100%;align-content: center;height: 30px;">
        </div>
        <div class="form-group">

            <label  class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
                <input style="width: 30%"type="password" class="form-control"  placeholder="输入密码" name="password">
            </div>
        </div>

        <div class="form-group" >
            <div class="col-sm-offset-2 col-sm-10" >
                <button type="submit" class="btn btn-default">注册</button>
            </div>

        </div>
    </div>
</form>
</body>
</html>

Controller

注意返回的是一个json字符串,ajax是前后端分离的核心。

  //Ajax异步验证用户名
    @RequestMapping("/registerAjaxCheck")
    @ResponseBody
    public String registerAjaxCheck(String name , HttpServletResponse response){
        System.out.println(name);
        User user = userService.checkUser(name);
        String msg = "";
        if (name==null||name.equals("")){
            msg = "null";
        }else if (user==null){
            msg = "OK";
        }
        System.out.println(msg);
        return msg;
    }

在这里插入图片描述

版权声明:本文为qq_43601784原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43601784/article/details/108645986

智能推荐

机器学习中K-means聚类算法的原理及实现(Python)

背景知识 K-means聚类算法是一种流行于数据挖掘领域的无监督学习算法。K-means聚类算法的目的是:把已知的 n个点划分到k个聚类中,使得每个点都属于离它最近的点(聚类中心)对应的聚类。 在完成该算法的过程中,找到k个聚类中心是关键。 算法介绍 我们先介绍几个基本概念: 簇:数据点的集合,每一个簇中的对象是相似的。 质心:簇中所有点的中心(由计算所有点坐标的均值可得)。 比如在这幅图中,我们...

接口回调基础理解

接口回调听起来好像很厉害的样子,但其实只要能够搞清楚代码的执行过程,多看几遍,并且认真思考,再加上勤奋的练习,熟练掌握简单的接口回调并不是难题,接下来,我会用一个简单的例子,来带大家一起分析代码的执行过程,以及这样写的好处,以及这样写的思路。 我们知道recyclerView是没有自带点击事件的,所以这里我们就拿给recyclerView添加点击事件为例。 ok 我们做好了一个简单的recycer...

Mac下的myeclipse安装

1.首先要安装jdk跟jre 2.安装过程中可能会遇到您需要安装旧 Java SE 6 运行环境才能打开此 Java 应用程序的提示     解决办法就是安装ava for os x 2015-001.,这里不要点系统给你提示的界面,根本没法下载 我上传的链接,可以直接下载:链接: https://pan.baidu.com/s/1qYbT6os 密码: x...

30分钟实战树莓派连接到微软云Azure IoT Hub并将数据可视化

更多内容,关注公众号: 树莓派是很多动手达人必备的小玩具,本节内容,让我们拿出树莓派,在30分钟内,将树莓派连接到微软云Azure的IoT Hub,然后将温湿度曲线可视化。 本实战完整视频: 树莓派连接到Azure IoT Hub 并用时序见解展示数据 本节内容中,树莓派发送的数据是模拟出来的,并没有真实的连接到传感器,您可以选购不同的传感器来采集真实的环境信息。 Azure IoT Hub 为我...

spring cloud gateway 整合ribbon、nacos discovery实现负载均衡源码简析

1 spring cloud gateway 负载均衡入口 spring cloud gateway 使用 LoadBalancerClientFilter 来实现载均衡的功能,该过滤器通过LoadBalancerClient.choose(ServerWebExchange exchange)方法来获取目标实例。 LoadBalancerClient 为spring-cloud-commons包...

猜你喜欢

VUE快速搭建项目

作为一个前端小辣鸡 今天在网上找到了 一个 快速 无脑式搭建vue项目的方式 分享一下 我们采用图形界面创建项目。通过 vue ui 命令启动 vue cli service 后,访问 http://localhost:8000/project/create 可以直接进入项目创建流程。 步骤中有些地方值得一提 详情:包管理器指定 npm,后续在npm 配置文件(.npmrc)中可手动指定国内镜像源...

2017-8-10 Struts2学习笔记二

一、web.xml文件的编写 1. 由于struts2是用过滤器拦截请求的,所以需要在web.xml文件中配置一个过滤器。 2. 这个过滤器的名字叫StrutsPrepareAndExecuteFilter,中文名曰struts准备和执行过滤器,就是这个过滤器拦截我们在地址栏的请求。 3. 查找这个过滤器,将它的全路径写在filter-class标签中,eclipse可以使用Shift+Ctrl+...

Windows Terminal配置Git

文章目录 Windows Terminal配置Git 效果 下载和安装 配置Windows Terminal 配置其它命令行 Windows Terminal配置Git 效果 先上效果图: 下载和安装 Windows Terminal是微软开发的面向命令行用户的全新,现代,功能丰富,高效的终端应用程序。 它包括Windows命令行社区最常请求的许多功能,包括对选项卡,富文本,全球化,可配置性,主题...

CW MCU v11.1学习笔记1

说明:通过处理器专家创建芯片为MC9S08DZ60的工程,按键控制LED 一、CW11.1软件界面布局 1、双击桌面图标,打开软件,设置工作空间 软件主界面 调试界面 处理器专家界面 有时经常调整(删除)面板布局,如果想恢复布局,可在Window工具栏下的Reset Perspective选项来复位面板布局 二、新建工程 1、在C/C++模式下,在Commander面板下点击New MCU pro...

栈-综合应用-中缀表达式转后缀表达式

综合应用 使用栈完成一个计算表达式的结果 输入:2 * 3 - 4 / 5 * 0.2 => 0.08 思路 使用index -> 2 (第一个为止),数字放入数栈,符号放入符号栈,符号栈为空,直接放入。 遇到第二个运算符,与符号栈中的符号进行运算符优先级比较。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gvhtZGbo-1601271684334)...