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

页面

<%@ 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")@ResponseBodypublic 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;}

Ajax+jquery实现异步验证用户名功能相关推荐

利用jquery.validate异步验证用户名是否存在
经过上百次的试验试和搜索,终于把jquery.validate的各种功能用法了解清楚,网上关于jquery.validate的AJAX表单验证比较少,特别是对rules里面的remote提得比较简单, ...
jquery.form 异步校验_利用jQuery.validate异步验证用户名是否存在
HTML头部引用: HTML内容(部分): 用户名: JS代码部分: $(function() { //表单验证JS $("#form1").validate({ //出错时添加的 ...
JQuery Ajax后台无刷新验证用户名重复，前台验证两次密码一致，后台创建并验证验证码
写在前面写web 的人,我想最先要解决的就是注册登录的界面了,一个小小的界面却包含着各种基本的知识,让我这个新手摸了一天. 效果图知识 1.bootstrap渲染表单 2.JQuery ajax验 ...
yii2 modal弹窗之ActiveForm ajax表单异步验证
作者:白狼出处:http://www.manks.top/yii2_modal_activeform_ajax.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位 ...
yii表单ajax验证,yii2 modal弹窗之ActiveForm ajax表单异步验证
前面我们讲述了yii2中如何使用modal以及yii2 gridview列表内更新操作如何使用modal的问题,本以为modal要告一段落可以开始新的话题了,但是实际问题往往超乎想像,这不modal弹 ...
jquery 重写 html5 验证,Jquery前端滑动验证方式功能实现
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 使用说明: 1.引入drag.js和Jquery库文件: 2.引入css文件: .slidetounlock{ font-si ...
jQuery表单验证用户名密码
//校验用户名function checkUsername() {var username = $("#username").val();alert(username);var u ...
html ajax验证用户名密码,AJAX实现注册验证用户名
本文实例为大家分享了AJAX实现注册验证用户名的具体代码,供大家参考,具体内容如下功能说明当用户在注册页面输入用户名并且鼠标焦点离开输入框时,到数据表中去验证该用户名是否已经存在,如果存在提示不可 ...
利用jQuery实现的Ajax 验证用户名是否存在
异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用jQuery框架实现的AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJA ...

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

页面

Controller

Ajax+jquery实现异步验证用户名功能相关推荐

最新文章

热门文章