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实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jQuery实现雪花飘落效果
Aug 02 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
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
python使用xslt提取网页数据的方法
2018/02/23 Python
python3判断url链接是否为404的方法
2018/08/10 Python
在Python中定义一个常量的方法
2018/11/10 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
用python解压分析jar包实例
2020/01/16 Python
python对Excel的读取的示例代码
2020/02/14 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
高三毕业典礼主持词
2014/03/27 职场文书
加油口号大全
2014/06/13 职场文书
班级文化标语
2014/06/23 职场文书
装配出错检讨书
2014/09/23 职场文书
论文致谢词范文
2015/05/14 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
2019同学聚会主持词
2019/05/06 职场文书
亲情作文之母爱
2019/09/25 职场文书
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers