jQuery+Ajax实现用户名重名实时检测


Posted in jQuery onJune 01, 2017

利用jQuery框架,封装了底层的Ajax异步技术,通过简单的方法调用即可实现。这篇博客是针对用户注册时出现的用户名重名问题的自动检测,利用的技术是Ajax异步传输。

register.jsp 注册显示页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>

<body>
 <form action="login" method="post" id="myform">
  <table align="center">
   <tr>
    <td>用户名:</td>
    <td>
     <input type="text" name="name" id="username" title="用户名" />
     <div id="message"></div>
    </td>
   </tr>
   <tr>
    <td>密码:</td>
    <td><input type="password" name="pwd" id="userpwd" title="密码" />
    </td>
   </tr>
   <tr>
    <td>性别:</td>
    <td><input type="radio" name="sex" value="男" title="性别" />男 <input
     type="radio" name="sex" value="女" title="性别" />女</td>
   </tr>
   <tr>
    <td>年龄:</td>
    <td><input type="text" name="age" title="年龄" />
    </td>
   </tr>
   <tr>
    <td>Email:</td>
    <td><input type="text" name="email" title="Email" />
    </td>
   </tr>
   <tr>
    <td colspan="2" align="center"><input type="button" value="注 册"
     onclick="check()" /> <input type="reset" value="重 置" /></td>
   </tr>
  </table>
 </form>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath }/script/jquery-3.2.1.js"></script>

<script type="text/javascript">
 // 检查表单元素的值是否为空
 function check() {
  var myform = document.getElementById("myform");
  for ( var i = 0; i < myform.length; i++) {
   if (myform.elements[i].value == "") {
    alert(myform.elements[i].title + "不能为空");
    myform.elements[i].focus();
    return;
   }
  }
  myform.submit(); // 表单中最后input提交标签用的是button类型,首先不提交表单,在js判断表单项都不为空时 再提交表单。
 }

 $(function(){
  $(":input[name='name']").blur(function(){
   var val = $(this).val();
   val = $.trim(val);

   if(val != ""){
    var url = "${pageContext.request.contextPath }/UserServlet"; // 将前端的业务转到后端Servlet来处理。最后Servlet再将结果返回给前端JSP页面
    var args = {"userName":val, "time":new Date()};

    $.post(url, args, function(data){ // URL中处理的结果都保存在data数据中,而data中的格式是Servlet中返回的结果格式,即为html
     $("#message").html(data);  //将data结果附加到div中
    });
   }
  });
 });
</script>
</html>

UserServlet 逻辑处理Servlet类,用于对用户重名的判断以及响应处理结果的输出等。其中用于数据库检测重名的方法省略了(LoginDao.getInstance().checkUserName(userName.trim()); // 查找数据库是否存在该用户名)

package com.servlet.user;

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;

import com.dao.LoginDao;
import com.user.UserInfo;

public class UserServlet extends HttpServlet {

 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {

  response.setContentType("text/html; charset=UTF-8"); // 设置响应结果的格式为text/html,字符集为UTF-8
  response.setCharacterEncoding("UTF-8"); // 设置响应结果的字符编码为UTF-8
  // 禁止缓存
  response.setHeader("Cache-Control", "no-store,no-cache,must-revalidate");
  response.setHeader("Cache-Control", "post-check=0,pre-check=0");
  response.setDateHeader("Expires", 0);
  response.setHeader("Pragma", "no-cache");

  PrintWriter out = response.getWriter();
  out.println("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
  // 从httpRequest()方法中获得请求参数值
  // 通过httpRequest()方法封装的请求参数被编码为UTF-8格式,此处若想还原原来的编码格式,则需要通过UTF-8格式解码

  String userName = request.getParameter("userName");
  String result = null;
  boolean check = LoginDao.getInstance().checkUserName(userName.trim()); // 查找数据库是否存在该用户名
  if (check) {
   result = "<font color='red'>该用户已经被使用</font>";
  } else {
   result = "<font color='green'>该用户名可以使用</font>";
  }
  response.getWriter().print(result); // 将结果输出到response响应流中
 }

 @Override
 protected void doGet(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException, IOException {
  this.doPost(req, resp);
 }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jQuery实现穿梭框效果
Jan 19 jQuery
jQuery实现动态删除LI的方法
May 30 #jQuery
jQuery异步提交表单实例
May 30 #jQuery
Angular2使用jQuery的方法教程
May 28 #jQuery
Jquery中attr与prop的区别详解
May 27 #jQuery
jQuery插件imgAreaSelect基础讲解
May 26 #jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 #jQuery
jQuery导航条固定定位效果实例代码
May 26 #jQuery
You might like
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
Node.js事件驱动
2015/06/18 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
用js实现放大镜效果
2020/10/28 Javascript
python写入xml文件的方法
2015/05/08 Python
Python中tell()方法的使用详解
2015/05/24 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
查看django版本的方法分享
2018/05/14 Python
Python Grid使用和布局详解
2018/06/30 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
大学生创业策划书
2014/02/02 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
护士医德医风心得体会
2016/01/25 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python