Ajax之验证用户名是否可用 入门
发布时间：2020-12-15 21:46:12 所属栏目：百科 来源：网络整理
导读：span style="font-family: Arial,Helvetica,sans-serif; background-color: rgb(255,255,255);"2014年12月23日14:48:20 天气阴 心情极度低落/span 使用servelt实现 validateUserName.jsp %@ page language="java" contentType="text/html; charset=UTF-8" pa
<span style="font-family: Arial,Helvetica,sans-serif; background-color: rgb(255,255,255);">2014年12月23日14:48:20 天气阴 心情极度低落</span> 使用servelt实现validateUserName.jsp <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>验证用户名是否可用</title>
<!--
1. 导入JQuery库
2. 获取name="username"的节点：username
3. 为username添加change响应事件
3.1 获取username的value属性值，去除前后空格且不为空，准备发送Ajax请求
3.2 发送Ajax 请求检验username是否可用
3.3 在服务端直接返回一个html的片段：<font color="red">该用户名已经被使用</font>
3.4 在客户端浏览器把其直接添加到#message 的html中.
-->
<script type="text/javascript">
$(function() {
$(":input[name='username']").change(function() {
var val = $(this).val();
val = $.trim(val);
if (val != "") {
var url="${pageContext.request.contextPath}/validateUserName";
var args = {"username":val,"time":new Date()};
$.post(url,args,function(data) {
$("#message").html(data);
});
}
});
})
</script>
</head>
<body>
<form method="post" action="">
<input type="text" name="username"/><br />
<div id="message"></div><br />
<input type="submit" value="submit"/>
</form>
</body>
</html>
觉得有些地方需要注意一下的 ①、导入的juery库任何一个版本都可以的，我导入的jquery.min.js(系统环境window8.1、chrome 一定是可以) ②、获取name="username"的节点：username,通过id选择器来获取也是可以的 ③、添加change事件是$("").change(function() {} ); 这个与javascript有点不同 ④、var url="${pageContext.request.contextPath}/validateUserName";也可以是var url ="validateUserName"; ${ pageContext.request.contextPath}的值为JobProjectWeb及项目名，考虑到浏览器后退的动作，用第一种好点 ⑤、val = $.trim(val);$.post(url,function(){}) 虽然这些都不能自动提示，但是确实是存在的，这个跟java代码有点区别，js中就算有错，也是不会提示的，所以自己要多加小心 ⑥、var args = {"username":val,"time":new Date()}; 传参数的时候是要以键值对的形式来写，我写错的原因把new Date() 写成了new date(),坑嗲是没有报错，所以请求是提交不到后台的，我在上面浪费了很多的时间，希望这个错误能让我记一辈子 ValidateUserNameServlet.java package com.gditc.servlet;
import java.io.IOException;
import java.util.Arrays;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/validateUserName")
public class ValidateUserNameServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
List<String> userNameList = Arrays.asList("AAA","BBB","CCC");
String username = request.getParameter("username");
String result = null;
if (userNameList.contains(username)) {
result = "<font color='red'>用户名已经存在</font>";
} else {
result = "<font color='green'>用户可以使用</font>";
}
response.setContentType("text/html; charset=utf-8");
response.getWriter().print(result);
}
}觉得需要注意的地方是
①、因为Tomcat中涵盖了HttpServlet这个类了，所以是不用再添加额外的jar的（Apache Tomcatv7.0servlet-api.jarjavax.servlet.http.HttpServlet.class） ②、可以直接new 一个名为ValidatUserNameServlet 的servlet，而不是去new 一个名为ValidatUserNameServlet的类；还有直接new 一个servlet是不用在web.xml下去配置servlet，因为已经通过注解的方式来说明servlet了@WebServlet("/validateUserName") <servlet> <servlet-name>validateUserName</servlet-name> <servlet-class>com.gditc.servlet.ValidateUserNameServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>validateUserName</servlet-name> <url-pattern>/validateUserName</url-pattern> </servlet-mapping> ssh实现（数据库mysql）
employeeAdd.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新增用户</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#empname").change(function() {
var empname = $(this).val();
empname = $.trim(empname);
if (empname != null) {
var url = "${pageContext.request.contextPath}/employee!validateEmpname.action";
var agrs = {"empname":empname,"date":<strong>new Date()</strong>};
$.post(url,agrs,function(data){
$("#message").html(data);
});
}
});
})
</script>
</head>
<body>
<form method="post" action="employee!addEmps.action">
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td>员工名:</td>
<td><input name="employee.empname" type="text" id="empname"/></td>
</tr>
<tr>
<td>雇佣日期:</td>
<td><input name="employee.hiredate" type="text" id="hiredate"/></td>
</tr>
<tr>
<td>薪水：</td>
<td><input name="employee.salary" type="text" id="salary"/></td>
</tr>
<tr align="center">
<td colspan="2"><button type="submit" value="提交">提交</button></td>
</tr>
<tr >
<td colspan="2"><div id="message"></div></td>
</tr>
</table>
</form>
</body>
</html>
<span style="white-space:pre"> </span>/**
* 验证用户名是否可用
* @return
* @throws IOException
*/
public String validateEmpname() throws IOException {
String empname = request.getParameter("empname");
Employee employee = employeeService.getEmpsByName(empname);
response.setCharacterEncoding("utf-8");
if (employee != null) {
response.getWriter().print("<font color='red'>该用户名已经存在</font>");
} else {
response.getWriter().print("<font color='green'>该用户名可用</font>");
}
return null;
}
EmployeeService.java public List<Employee> getAllEmps() {
return employeeDao.getAllEmp();
}
EmployeeDao.java
public Employee getEmpByName(String empname) {
Session session = getSession();
Query query = session.createQuery("from Employee where empname=:name");
query.setParameter("name",empname);
Employee employee = (Employee) query.uniqueResult();
return employee;
}注意一下：
①=：等于冒号前后不能有空格，否则报错
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |