JQuery ajax检测重名并进行提示

 

  此处主要是在JAVAWeb项目中利用JQuery AJAX中的$.get()方法以及input标签的两个事件:onkeyup和onblur,实现检测用户名是否重名并进行提示。

  $.get(URL,data,function(data,status,xhr),dataType);

       URL:请求的URL,必填项

       data:连同请求发送到服务器的数据,非必填项

       function(data,status,xhr):请求成功时运行的函数,非必填项

       dataType:规定服务器响应的数据类型,非必填项

 onkeyup:当键盘按键被松开时触发的事件

 onblur:当input失去焦点时触发的事件(此处主要用它来隐藏提示语,可不用)

效果图展示:

             1.初始状态,没有提示语

              

          2.当用户输入用户名时(输入一个数据库中暂未存在的用户名),触发onkeyup事件,进行ajax操作

             

 

          3.当用户输入一个在数据库中已存在的用户名时,同样触发onkeyup事件,进行ajax操作

            

        4.当用户重新输入一个数据库中不存在的用户名时,再次触发onkeyup事件,进行ajax操作

           

       5.当焦点离开该input时,隐藏掉提示语(此处为触发onblur事件,该事件可根据具体需求确定是否设置)

          

 

   1.HTML代码

<input type="text" name="registerName" id="registerName" placeholder="设置您的用户名">
						<span id="tishi1"></span>

 

  2.引入JQuery文件

<script src="jquery-3.3.1.min.js" type="text/javascript"></script>

 

 3.JQuery AJAX代码  (获取值,异步传输数据,控制提示语标签的隐藏和展示)

   

<script>
	//先将提示展示出来
	$("#tishi1").show();

	$(function() {
	//当键盘按键被松开时触发事件:通过AJAX将input中的数据传递给后端,在后端验证是否已存在该用户名
		$("#registerName").keyup(
				function() {
					var registerName = $(this).val();
					registerName = $.trim(registerName);
					if (registerName != "") {
						var url = "CheckRegeister.do?";
						registerName = "registerName=" + registerName;
						url = url + registerName;
						//$.get()方法能够返回一个JQuery XMLHttpRequest对象
						var jqxhr = $.get(url, callback);
						//若执行JQuery出现错误则提示错误信息
						//在JQuery3.0以后需要用done()、fail()、alwayls()代替success()、error()、complete();
						jqxhr.fail(function(xhr, error, throwerror) {
							alert("error" + xhr.status + " error=" + error
									+ " throwerror:" + throwerror);
						});
					}
				});
		//当输入注册名的输入框失去焦点后就先隐藏提示语,这个隐藏提示语可根据具体需求决定是否隐藏
		$("#registerName").blur(function cls() {
			$("#tishi1").hide();
		});
	});
	//ajax的回调函数
	function callback(data, status) {
		$("#tishi1").show();
		$("#tishi1").html(data);
	}
</script>

 

 4.Servlet文件代码(调用Service层接口,查询该用户名是否存在,返回结果)

   

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//1.取值
		String registerName =request.getParameter("registerName");
		 //2.判断,此处用于判断是否已存在该用户
	   IUserService userService = new UserServiceImp();
	   isExist = userService.userAccountIsExist(registerName);
	   System.out.println("registerName"+registerName);
	   request.getSession().setAttribute("REGISTERMSG", "");
	  //3.返回结果
	      if(isExist) {
	    	  response.getWriter().print("<font color='red'>抱歉,该用户名已被注册,请重新设置</font>"); 
	      }else {
	    	  response.getWriter().print("<font color='green'>恭喜,该用户名可用</font>"); 
	      }
	}

  5.数据库查询,此处我采用的是DBUtils(封装了JDBC的代码,简化了DAO层的操作),仅供参考,可自由发挥

      


	@Override
	public boolean accountIsExist(String account) {
		User user = null;
		conn = DataBaseHelper.getConn();
		ResultSetHandler<User> rsh = new BeanHandler<User>(User.class);	
		String sql = "SELECT * FROM user WHERE account=?";
		try {
	       user =  run.query(conn,sql,rsh,account);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			try {
				DbUtils.close(conn);
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		if(user!=null) {
			return true;
		}else {
			return false;
		}
	}

 

已标记关键词 清除标记
相关推荐
1.本书1~16章所附代码的运行环境 操作系统:Windows 2003、Windows XP Professional,或者Windows 2000 开发环境:Microsoft Visual Studio 2005 数据库:SQL Server 2005 Web服务器:IIS 5.1及以上版本 2.本书17~27章所附代码的运行环境 数据库采用MySQL 4.0及以上版本 服务器采用Tomcat 5.0 及以上版本 开发工具采用Eclipse 3.1以上版本 3.本书所附光盘范例 第1章(/C01/) JsWeb 传统的JavaScript模式实现刷新 IframeWeb 基于框架的不刷新模式 AjaxWeb 基于Ajax的Web 2.0模式的刷新模式 AsyncAjaxSample Ajax异步调用的完整示例 第2章(/C02/) 2.1.htm 3段JS使用形式 2.2.htm 不同浏览器使用“<noscript></noscript>” 2.3.htm 调用单独的JS文件 2.3.js 一个单独的JS测试文件 2.4.htm 完成层的换肤功能 2.5.htm 用于调试JS程序的测试代码 第3章(/C03/) 3.1.htm 判断浏览器类型的例子 3.2.htm 演示undefinded如何与null进行比较 3.3.htm 演示同名局部变量和全局变量的调用情况 3.4htm 引用数值型数据的例子 3.5.htm 数组使用的小例子 3.6.htm 一个字符串型转换为逻辑型数据的例子 3.7.htm 使用toLowerCase()方法进行转换的例子 3.8.htm 通过字符串类型来调用toLowerCase()方法 3.9.htm 对数字进行了复制、传递和比较 3.10.htm 复制、传递和比较一个对象 3.11.htm 对字符串进行比较 第4章(/C04/) 4.1.htm 简单表达式的例子 4.2.htm 两个字符串进行加操作的实例 4.3.htm 减号的取反功能 4.4.htm 变量赋值的例子 4.5.htm 把表达式赋值给一个变量的方法 4.6.htm 演示了两个符号的区别 4.7.htm “!==”和“===”的演示 4.8.htm 逗号表达式的连接应用 4.9.htm 对表达式进行“Void”运算 4.10.htm typeof运算符的使用 4.11.htm 创建和删除对象的例子 4.12.htm 用delete移除了myArry的第二个元素 4.13.htm 用“()”改变运算优先级的例子 4.14.htm 一个运算符结合性的例子 第5章(/C05/) 5.1.htm 一个最简单的条件语句 5.2.htm 检查变量x是否赋初值 5.3.htm if..else的使用情况 5.4.htm 一个用else进行更多选择的例子 5.5.htm 一个if语句嵌套的例子 5.6.htm 嵌套语句的另一种应用 5.7.htm 一个switch语句的应用 5.8.htm 利用while循环显示了一个6行的表格 5.9.htm while语句和do-while语句的循环实例 5.10.htm 显示了一个简易的九九乘法表 5.11.htm 用无限循环结构对上面乘法表的改写 5.12.htm 一个显示15以内奇数的程序 5.13.htm 一个函数定义的简单示例 5.14.htm 利用一个函数来显示对登录用户的问候 5.15.htm 定义了一个求阶乘的函数 5.16.htm JavaScript实现阶乘函数 5.17.htm 全局变量和局部变量的区别 5.18.htm 变量实例 5.19.htm 在函数内部使用arguments 5.20.htm 创建并使用动态函数的例子 5.21.htm URI编码处理函数的例子 5.22.htm 数值处理函数的例子 5.23.htm 一个isNaN方法应用的例子 第6章(/C06/) 6.1.htm 简单对象的使用 6.2.htm 如何使用构造函数为对象实例增加属性和方法 6.3.htm 在网页上显示中文形式的日期 6.4.htm 将一个小数四舍五入到指定位数 6.5.htm 以从大到小冒泡排序法为例 6.6.htm 使用Navigator的属性进行浏览器检测 6.7.htm 列出了一些可能的浏览器类型 6.8.htm Screen对象的使用 6.9.htm 用来检测浏览器窗口的实际大小 6.10.htm 可以设置文字大小随窗口大小而改变 6.11.htm 客户端性能检测 6.12.htm 个浏览器按键模拟的示例 第7章(/C07/) 7.1.htm 演示了编码和译码使用的方法 7.2.htm 演示了exec方法的用法 7.3.htm 对RegExp对象的综合举例 7.4.htm 演示了字符匹配的使用情况 7.5.htm 正则匹配举例 7.6.htm 用 ^ 匹配目标字符串的开始位置 7.7.htm 用 $ 匹配目标字符串的结尾位置 7.8.htm 用 \b 匹配一个字边界 第8章(/C08/) 8.1.htm XHTML中的事件绑定 8.2.htm 一个表单按钮的click处理器 8.3.htm 测试事件处理器的作用域 8.4.htm 绑定方法的使用 8.5.htm 使用一段文本来接收按键点击 8.6.htm 绑定处理器至对象 8.7.htm 网页中禁止鼠标右键的操作 第9章(/C09/) 9.1.htm 实现了在网页上显示当前时间的功能 9.2.htm 一个显示当前日期和星期的完整示例 9.3.htm 同时显示日期、时间和星期 9.4.htm 一个分时段问候的例子 9.5.htm 实现了显示不同地区的时间代码 9.6.htm 实现悬浮时钟效果的完整代码 9.7.htm 计算器的完整程序 9.8.htm 可以进行四则混合运算的计算器 9.9.htm 打字效果 9.10.htm 实现图片的随机选择 9.11.htm 一个基本下拉菜单 9.12.htm 下拉菜单 9.13.htm 实现渐显效果的下拉菜单的完整代码 9.14.htm 模拟系统菜单 9.15.htm 图片显示窗口的完整代码 9.16.htm 远程控制窗口 9.17.htm 实现菜单滑动效果的完整代码 9.18.htm 左键弹出式菜单效果的完整代码 9.19.htm 实现浮动菜单效果的完整代码 9.20.htm 实现树型导航菜单的完整代码 第10章(/C10/) ReturnText Ajax返回字符串数据 ReturnXML Ajax读取XML类型数据 PostUser Ajax提交数据更新服务器内容 xmlhttpWeather 获取天气网站的内容 第11章(/C11/) 11.1.htm 采用标准的DOM方法创建一个表格并将其插入到页面中 11.2.htm 添加单元格 11.3.htm 删除表格的第一行和第一列 11.4.htm 实现单元格行顺序的改变 dynamicTable 完整的Ajax调用DOM的实例 第12章(/C12/) 12.1.htm 一个在元素内定义CSS的范例 12.2.htm 一个在Head元素内定义CSS的范例 12.3.htm 引用CSS文件的页面 12.4.htm 通过下拉列表框来改变<div>容器的背景色 12.5.htm 实演示如何创建CSS文件 12.6.htm 演示一个在网页中应用投影的范例 12.7.htm 使用Ajax动态改变局部元素样式 CSSmenu 使用Ajax+CSS实现动态菜单效果 第13章(/C13/) 13.1.xml 一个简单的xml文件 13.1.xsl 使用XSLT将XML转换为HTML 13.2.xml 一个雇员列表xml文件 13.2.xsl 一个XSL样式表的例子 13.3.htm Internet Explorer 浏览器中XML的应用 13.4.htm 直接对XML文档进行添加、删除和显示数据的操作 13.5.js Mozilla 浏览器中xml的应用 13.5.xml 简单的xml文件 13.6.htm 格式化输出xml文件 13.7.htm 一个添加/删除记录的例子 第14章(/C14/) MenuSample 级联菜单实例 PageSample 实现Ajax翻页效果 数据库备份 本章实例所需要的数据库 第15章(/C15/) AjaxCallerSchedul 使用AjaxCaller实现简单的定时任务 RicoColor 使用Open Rico实现动态调色板 RicoDrag 使用Open Rico实现可拖拽的层 WebSitetestdojo 使用dojo组件实现卷帘效果的div隐藏 第16章(/C16/) 留言板源代码 所有留言板实例的源代码 数据库备份 留言板数据所需要的数据库 第17章(/ch17) 程序描述:本章介绍开发AJAX的开源框架GWT(Google Web Toolkit) 。最典型的Google Maps和Gmail等Google服务也正是基于此框架开发的。读者将能够快速掌握GWT的各种开发所涉及到的内容。 /firstgwt/FirstGWT.html 第一个GWT示例 /calculator/TexCalculator.html 个税计算器 第18章(/ch18) 程序描述:本章将介绍 GWT应用中高级应用的部分,包括各中组件和布局、如何发送XMLHttpRequest请求,以及如何解决浏览器历史记录问题等等,同时读者还将详细的了解RPC应用的开发过程。 /xmlsample/AjaxSample.html 读取XML文件 /history/HistoryExample.html 保存历史记录 /rpc/RPCExample.html RPC调用 第19章(/ch19) 程序描述:本章模仿Google ig,使用Ajax技术实现一个个性化主页系统。通过拖拽方式设置主页,当完成拖拽窗口时,自动保存布局,使用户可以随时根据喜好来设置布局。 /login.jsp 登录页面 /homepage.jsp 自定义主页 /all.css CSS样式表文件 /js JavaScript脚本文件 /graphics 系统使用的图片文件夹 第20章(/ch20) 程序描述:本章使用Prototype封装的Ajax对象实现上传文件时显示进度条的功能。当上传文件时,客户端同时显示文件上传的进度,从而及时了解文件传送情况。 /test.html 上传文件 /periodcal.jsp 上传文件后台处理页面 / prototype.js prototype框架类库文件 第21章(/ch21) 程序描述:本章将实现通过滑块来显示分页数据的功能。传统的分页方式,多数是通过单击按钮的方式来显示分页的。利用Ajax可以通过使用滑块的滑动来选择所显示的分页,这种拖拽的方式有很好的用户体验。 /test.html 滑动显示分页页面 /js JavaScript脚本文件 /img 系统使用的图片文件夹 第22章(/ch22) 程序描述:本章将利用开源框架Prototype,讲述如何在网页中实现Windows关机效果,使读者对Prototype框架有进一步的认识。 /lightbox.html 仿Window关机效果 /lightbox.js JavaScript脚本文件 第23章(/ch23) 程序描述:本章将使用Ajax技术实现动态获取数据的树状菜单。当展开菜单时,自动向服务器发送请求,查询该菜单下的子菜单,并在客户端显示子菜单,而无需刷新整个页面。 /simpleTree.jsp 简单树 /staticTree.jsp 静态树 /dynamicTree.jsp 动态树 /css/tree.css CSS样式表文件 /js/all.js JavaScript脚本文件 /images 图片文件 第24章(/ch24) 程序描述:本章将使用Ajax技术实现无刷新即可浏览RSS的阅读器。添加一个RSS地址时,自动保存到数据库。打开阅读RSS时,自动获取最新的RSS内容,而无需刷新页面。 /RSSReader.jsp RSS阅读器 /rss.js JavaScript脚本文件 第25章(/ch25) 程序描述:本章将仿照Google Suggest,使用Ajax技术实现动态获取搜索提示的功能。当输入搜索关键字时,自动向服务器发送请求,查询相关的关键字,并及时提示用户可输入的关键字。 /suggest.html 搜索提示 /ajax_search.js JavaScript脚本文件 第26章(/ch26) 程序描述:本章将使用Ajax技术实现无刷新即可浏览图片的相册。浏览图片时,自动向服务器发送请求,查询该类别下的照片,并显示到客户端。用户也可以根据喜好随时改变相册的风格。浏览相册的整个过程无需刷新页面。 / show.jsp 图片浏览 /all.js JavaScript脚本文件 /new.css CSS样式表文件 /styles.css CSS样式表文件 /images 图片文件 第27章(/ch27) 程序描述:本章将使用Ajax技术实现聊天室程序。使用Ajax来动态获取聊天记录,可以避免因屏幕不断刷新而出现的闪动现象。另外,使用Ajax可以减少服务器端的负荷,对这种客户端与服务器端通信量极大的程序是非常有意义的。对用户来讲,有很好地用户体验。 /welcome.jsp 聊天室欢迎页面 /room.jsp 聊天室页面 /ajax_chat.js JavaScript脚本文件 /styles.css CSS样式表文件
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页