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 封装 Ajax 常用方法(推荐)
May 21 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery实现带进度条的轮播图
Sep 13 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中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
phpwind放自动注册方法
2006/12/02 Javascript
Prototype使用指南之form.js
2007/01/10 Javascript
JS之小练习代码
2008/10/12 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
十分钟搞定pandas(入门教程)
2019/06/21 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
Python生成器常见问题及解决方案
2020/03/21 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
美国在线工具商店:Acme Tools
2018/06/26 全球购物
毕业生自荐书
2014/02/02 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
k-means & DBSCAN 总结
2021/04/27 Python