JavaWeb学习-AJAX-3-练习:验证用户名是否存在
开始来做AJAX的练习,就是判断用户名是否存在,这个场景我们在一些网站的注册页面经常看到,这里说的用户名可以是昵称等。只要用户输入一个名称,输入光标离开到其他输入框,旁边就显示这个用户名是否被注册过,就是这么一个场景。
1.场景分析
- 先有一个页面,提供用户名和密码输入的注册页面,例如/reg.jsp
- 光标离开输入框,这里需要一个事件,onblur就是这个事件。
- 这个事件需要调用一个函数
- 这个函数里面就是AJAX操作,发送请求到一个检测名称的servlet
- 新建一个servlet,用来模拟查库用户名比对。
分析下来就是上面这些步骤,我们在最后一步中,这里就不需要用到数据库,直接用一个硬编
2.注册页面代码
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>注册</title><script type="text/javascript" src="${pageContext.request.contextPath}/js/myJS.js"></script><script type="text/javascript">function checkName(){//1. 获取用户名var name = document.getElementsByName("userName")[0];//2. 创建XMLHttpRequest对象var xhr = getXMLHttpRequest();//5. 处理结果,习惯写这个位置xhr.onreadystatechange = function(){if(xhr.readyState == 4){if(xhr.status == 200){//服务器响应一切正常alert(xhr.responseText);}}}//3. 创建连接xhr.open("get", "${pageContext.request.contextPath}/servlet/checkNameServlet?name=" + name.value);//4.xhr.send(null);}</script>
</head>
<body>用户名:<input type="text" name="userName" onblur="checkName()" /><br/>密码:<input type="password" name="pwd" /><br/>
</body>
</html>
这里面用到了前面学习到的XMLHttpRequest对象,还有我们封装的js的引用,以及注册页面的form表单,因为我们只判断用户名就可以,所以这里不需要什么提交注册按钮。
3.Servlet代码
package com.anthony.servlet;import java.io.IOException;
import java.io.PrintWriter;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class CheckNameServlet extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setCharacterEncoding("UTF-8");PrintWriter out = response.getWriter();String name = request.getParameter("name");if("Anthony".equals(name)) {out.println(name + "已经被占用,请更换一个用户名。");}else {out.println("恭喜你,该用户名可以注册。");}}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}}
Web.xml内容
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"><display-name>AjaxDemo</display-name><welcome-file-list><welcome-file>index.html</welcome-file><welcome-file>index.htm</welcome-file><welcome-file>index.jsp</welcome-file><welcome-file>default.html</welcome-file><welcome-file>default.htm</welcome-file><welcome-file>default.jsp</welcome-file></welcome-file-list><servlet><description></description><display-name>servletDemo</display-name><servlet-name>servletDemo</servlet-name><servlet-class>com.anthony.servlet.ServletDemo</servlet-class></servlet><servlet-mapping><servlet-name>servletDemo</servlet-name><url-pattern>/servlet/servletDemo</url-pattern></servlet-mapping><servlet><description></description><display-name>checkNameServlet</display-name><servlet-name>checkNameServlet</servlet-name><servlet-class>com.anthony.servlet.CheckNameServlet</servlet-class></servlet><servlet-mapping><servlet-name>checkNameServlet</servlet-name><url-pattern>/servlet/checkNameServlet</url-pattern></servlet-mapping>
</web-app>
项目全部文件结构
上面文件1.jsp和 js文件夹中内容,请看上一篇文章中的代码。
4.测试和调试
打开浏览器访问http://localhost:8080/AjaxDemo/reg.jsp
, 分别在用户名输入框输入“Anthony”和其他任意字符。
如果出现以下弹窗,说明代码工作了。
输入Anthony,会提示名称存在
其他名称就提示不占用。
5.优化提示信息位置
上面我们信息是通过弹窗来提示,这个只是我们在开发中使用的调试手段。现在我们优化一下,让在在用户名输入框右侧出现文字提示,而不是弹窗。
Servlet中代码调整下,打印改成true和false
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setCharacterEncoding("UTF-8");PrintWriter out = response.getWriter();String name = request.getParameter("name");if("Anthony".equals(name)) {out.println(true);}else {out.println(false);}}
Reg.jsp中判断输出是不是true这个字符串,如果是提示用户名存在,不是提示可以使用
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>注册</title><script type="text/javascript" src="${pageContext.request.contextPath}/js/myJS.js"></script><script type="text/javascript">function checkName(){//1. 获取用户名var name = document.getElementsByName("userName")[0];//2. 创建XMLHttpRequest对象var xhr = getXMLHttpRequest();//5. 处理结果,习惯写这个位置xhr.onreadystatechange = function(){if(xhr.readyState == 4){if(xhr.status == 200){//服务器响应一切正常var msg = document.getElementById("check_msg");//document.write(xhr.responseText);if(xhr.responseText == "true"){msg.innerHTML="用户名已存在";}else {msg.innerHTML="可以使用";}}}}//3. 创建连接xhr.open("get", "${pageContext.request.contextPath}/servlet/checkNameServlet?name=" + name.value);//4.xhr.send(null);}</script>
</head>
<body>用户名:<input type="text" name="userName" onblur="checkName()"/><span id="check_msg"></span><br/>密码:<input type="password" name="pwd"/><br/>
</body>
</html>
例如,不存在用户名判断效果是这样的
JavaWeb学习-AJAX-3-练习:验证用户名是否存在相关推荐
- html ajax验证用户名密码,AJAX实现注册验证用户名
本文实例为大家分享了AJAX实现注册验证用户名的具体代码,供大家参考,具体内容如下 功能说明 当用户在注册页面输入用户名并且鼠标焦点离开输入框时,到数据表中去验证该用户名是否已经存在,如果存在提示不可 ...
- jQuery ajax简单案例-验证用户名是否可用
jQuery ajax简单案例-验证用户名是否可用 HTML <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- ajax教程 异步刷新验证,Ajax实现异步刷新验证用户名是否已存在的具体方法
都是简单的实例,所以直接发代码 静态页面Ajax.html . 代码如下: Ajax function loadXMLDoc() { if (document.getElementById(" ...
- 蓝杰学习01--登陆界面验证用户名和密码
今天第一次在蓝杰学习,飞哥给我们讲了一些关于界面,事件监听和接口的一些知识.学完之后给我们布置了一个作业,就是编写一个登陆界面验证用户名和密码. ** 要用到的类:JFrame(窗体).FlowLay ...
- html验证用户名已存在,BootstrapValidator验证用户名已存在(Ajax)_亦心_前端开发者...
Java 一.实现效果: 重置这里有bug,bootstrapValidator验证不能重置,待解决. 二.代码准备: 引入bootstrap,bootstrapValidator和 / 三.部分代码 ...
- ajax校验用户名可用吗,基于jQuery实现Ajax验证用户名是否可用实例
本文实例为大家分享了jQuery ajax简单案例-验证用户名是否可用的具体代码,供大家参考,具体内容如下 HTML Insert title here //页面加载完成后 $(function() ...
- asp.net 用户注册怎么判断用户名是否重复 ajax,AJAX_asp.net结合Ajax验证用户名是否存在的代码,1, 使用JavaScript js文件,验证 - phpStudy...
asp.net结合Ajax验证用户名是否存在的代码 1, 使用JavaScript js文件,验证用户名是否存在 复制代码 代码如下: var ajax = function(option) { va ...
- 使用jquery ajax 实现用户的用户名注册验证,如果该用户已存在则提示该用户已存在
使用jquery ajax 实现用户的用户名注册验证,如果该用户已存在则提示该用户已存在 jQuery AJAX 基本使用方法 接口使用 http://180.76.117.80:8080/AjaxS ...
- JQuery Ajax后台无刷新验证用户名重复,前台验证两次密码一致,后台创建并验证 验证码
写在前面 写web 的人,我想最先要解决的就是注册登录的界面了,一个小小的界面却包含着各种基本的知识,让我这个新手摸了一天. 效果图 知识 1.bootstrap渲染表单 2.JQuery ajax验 ...
最新文章
- python5_python5
- 《Redis 系列》- list命令
- 计算机二级的笔记,我的笔记全国计算机等级考试二级教程
- 空间插值方法对比整理
- LINUX下定时备份MYSQL数据库SHELL脚本
- 三十分钟理解博弈论“纳什均衡” -- Nash Equilibrium
- 关于SPSS16的安装及教程
- Oracle的nls_sort和nlssort()函数排序功能
- 15 使用计算机应遵守行业道德规范,初中信息技术会考试题 -
- C# 如何添加PPT背景(纯色背景、渐变色背景、图片背景)
- c语言 众数,C语言实现查找一组数中的众数
- UBT18:ubuntu安装阿里云盘
- android m壁纸驱动之家,微软打造的良心壁纸App,仅4.2M
- c语言 英语试卷,英语听力试题及答案
- EasyX库使用入门
- 2018推荐的android手机,2018年7月份Android手机性价比排行榜
- flutter git 拉不起来_这些基础不牢固,我们的蛙泳就别想拉起来
- 唐骏离职新华都当老板
- 2021 华中科技大学软件学院软件体系结构考试题回忆
- Vue.js中使用vis network出现的点和线更新问题
热门文章
- 控制图简明原理及Plotly实现控制图Python实践
- 高效开发:java对象转化成String类型的四种方法
- 计算车号Java,汽车VIN码校验算法 java版
- Python class __int__容易理解
- 京东20210618活动脚本
- C语言编程编制职工档案管理程序,c语言人事档案管理程序
- YOLO v5 引入解耦头部
- 群晖NAS DSM7.0系统安装qBittorrent和transmission套件教程
- 长波红外相机和相机内核2022年全球行业分析报告
- android 调出键盘表情_Android 显示输入法中的emoji表情以及String字符