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实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 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
PHP程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
javascript的BOM汇总
2015/07/16 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
年级组长自我鉴定
2014/02/22 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
医学求职信
2014/05/28 职场文书
诚实守信演讲稿
2014/09/01 职场文书
保留意见审计报告
2015/06/05 职场文书
给朋友的赠语
2015/06/23 职场文书