5.验证用户名是否已经被注册：AJAXC请求
首先在 web.xml 文件中添加配置信息
<!-- 配置全局的字符集 -->
<context-param>
<param-name>encode</param-name>
<param-value>utf-8</param-value>
</context-param>
在 regist.jsp 文件中添加 相关逻辑
// 当input失去焦点时马上执行对应的表单验证
// 需要为每个input添加一个失去焦点的事件
// 添加一个文档就绪事件，在事件中为每个input添加对应的方法
$(function(){
// 文档就绪事件，当当前文档家在完成之后，会自动调用
$("input[name='username']").blur(function(){
// 验证用户名是否为空
var flag=formObj.checkNull("username", "用户名不能为空"); if(flag){//说明username输入框不为空
// 发送ajax
var url="/AJAXCheckUsernameServlet?username=" + $(this).val();
// load方法是通过一个组件来调用的
// 当ajax请求收到应答后，会将应答的内容自动填充到该组件内部
// $("#msg_username").load(url);
//$().load->如果添加了请求参数，则是post请求，如果没有添加，是get请求 //$.get发送的就是get请求
// result是服务器返回给浏览器的应答内容
$.get(url,function(result){
// 将应答内容添加到username对应的span中
$("#msg_username").html(result);
});
/* var url2="/AJAXCheckUsernameServlet";
$.post(url2,data,function(result){
//result就是服务器返回的应答内容
// 将应答内容添加到username对应的span中
alert("true");
$("#msg_username").html(result);
}); */
}
});
编写对应的AJAX请求逻辑
package cn.bingou.web; import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet; import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import cn.bingou.util.JDBCUtils; public class AJAXCheckUsernameServlet extends HttpServlet { public void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException { // 获取web.xml中配置的字符集
ServletContext sc=this.getServletContext();
String encode=sc.getInitParameter("encode");
// 1.处理乱码问题应答乱码
resp.setContentType("text/html;charset=" + encode);
// 2.获取请求参数
String username=req.getParameter("username");
// 处理get请求乱码
byte[] array=username.getBytes("utf-8");
username=new String(array,encode);
// 3.查询数据库，看该用户名是否存在
String sql="select * from user where username=?";
Connection conn=null;
PreparedStatement ps=null;
ResultSet rs=null; try {
conn=JDBCUtils.getConnection();
ps=conn.prepareStatement(sql);
ps.setString(1, username);
rs=ps.executeQuery();
if(rs.next()){ // 用户名存在
resp.getWriter().write("该用户已存在");
} else {
resp.getWriter().write("恭喜您，该用户可以使用");
}
} catch (Exception e) {
e.printStackTrace();
} finally{
JDBCUtils.close(conn, ps, rs);
}
} public void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doGet(req, resp);
} }
这里出了一个错误
我一开始用的是post验证，代码如下：
var url2="/AJAXCheckUsernameServlet";
$.post(url2,data,function(result){
//result就是服务器返回的应答内容
// 将应答内容添加到username对应的span中
alert("true");
$("#msg_username").html(result);
});
但是我的AJAX并没有应答，我也不知道咋回事
于是改成了get请求，代码如下：
var url="/AJAXCheckUsernameServlet?username=" + $(this).val();
$.get(url,function(result){
// 将应答内容添加到username对应的span中
$("#msg_username").html(result);
});
但是我的AJAX文件里面的get请求编码一开始设置的是iso8895-1请求时出现错误，改成 utf-8 之后就成功了。
regist.jsp文件
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>欢迎注册BinGou</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/regist.css"/>
<script type="text/javascript" src="/js/jquery-1.4.2.js"></script>
<script type="text/javascript">
var formObj={
"checkForm":function(){
// 1.非空验证
var flag=true;//控制表单提交的变量，默认为true
/* flag=this.checkNull("username","用户名不能为空")&&flag; */
flag=this.checkNull("password","密码不能为空")&&flag;
flag=this.checkNull("password2","确认密码不能为空")&&flag;
flag=this.checkNull("nickname","昵称不能为空")&&flag;
flag=this.checkNull("email","邮箱不能为空")&&flag;
flag=this.checkNull("valistr","验证码不能为空")&&flag; //2. 两次密码一致验证
flag=this.checkPassword("password","两次密码应该一致") && flag;
// 3.邮箱格式验证
flag=this.checkEmail("email","邮箱格式不正确") && flag;
return flag;
},
"checkemail":function(name,msg){
var email=$("input[name='"+name+"']").val();
// 当邮箱的值不为空串时再进行格式判断
if($.trim(email) != ""){
// 123@163.com.cn
var reg=/^\w+@\w+(\.\w+)+$/;
if(!reg.test(email)){
// 设置错误提示信息
this.setMsg(name, msg);
return false;
}else{
// 设置清空之前添加的错误信息
this.setMsg(name,"");
return true;
}
}
return false;
}, "checkPassword":function(name,msg){
var psd1=$("input[name='password']").val();
var psd2=$("input[nmae='password2']").val();
if($.trim(psd1)!=""&&$.trim(psd2)!=""){
if(psd1!=psd2){
// 添加错误提示信息
this.setMsg(name+"2",msg);
return false;
}else{
// 清空之前添加的错误提示信息
this.setMsg(name+"2","");
return true;
}
}
return false;
}, "checkNull":function(name,msg){ // 用来判断input值是否为null的方法
// 拿到对应的input框的值
var value=$("input[name='"+name+"']").val();
// 判断是否为空
if($.trim(value)==""){
// 如果为空，则调用设置消息的方法，将错误信息显示在input的后面
this.setMsg(name,msg);
// 表单不应该提交
return false;
}else{
// 将之前添加的错误提示信息清空
this.setMsg(name, "");
// 表单可以提交
return true;
}
}, "setMsg":function(name,msg){
// 获取name指定的input后面的span,然后将传入的错误信息显示在span内部
$("input[name='"+name+"']").nextAll("span").html(msg).css("color","red");
}
}; // 当input失去焦点时马上执行对应的表单验证
// 需要为每个input添加一个失去焦点的事件
// 添加一个文档就绪事件，在事件中为每个input添加对应的方法
$(function(){
// 文档就绪事件，当当前文档家在完成之后，会自动调用
$("input[name='username']").blur(function(){
// 验证用户名是否为空
var flag=formObj.checkNull("username", "用户名不能为空"); if(flag){//说明username输入框不为空
// 发送ajax
var url="/AJAXCheckUsernameServlet?username=" + $(this).val();
// load方法是通过一个组件来调用的
// 当ajax请求收到应答后，会将应答的内容自动填充到该组件内部
// $("#msg_username").load(url);
//$().load->如果添加了请求参数，则是post请求，如果没有添加，是get请求 //$.get发送的就是get请求
// result是服务器返回给浏览器的应答内容
$.get(url,function(result){
// 将应答内容添加到username对应的span中
$("#msg_username").html(result);
});
/* var url2="/AJAXCheckUsernameServlet";
$.post(url2,data,function(result){
//result就是服务器返回的应答内容
// 将应答内容添加到username对应的span中
alert("true");
$("#msg_username").html(result);
}); */
}
}); $("input[name='password']").blur(function(){
formObj.checkNull("password","密码不能为空");
});
$("input[name='password2']").blur(function(){
formObj.checkNull("password2","确认密码不能为空");
formObj.checkPassword("password","两次密码应该一致");
});
$("input[name='nickname']").blur(function(){
formObj.checkNull("nickname","昵称不能为空");
});
$("input[name='email']").blur(function(){
formObj.checkNull("email","邮箱不能为空");
formObj.checkEmail("email","邮箱格式不正确");
});
$("input[name='valistr']").blur(function(){
formObj.checkNull("valistr","验证码不能为空");
}); }); </script>
</head>
<body>
<!-- action：请求的路径 ，method：请求方式 -->
<form action="/RegistServlet" method="POST" onSubmit="return formObj.checkForm()" >
<h1>欢迎注册BinGou</h1>
<table>
<tr><!-- 如果出现错误将在表单顶部显示 -->
<td colspan="2" style="text-align:center;color:green">
<%=request.getAttribute("errMsg")==null?"":request.getAttribute("errMsg") %>
</td>
</tr>
<tr>
<td class="tds">用户名：</td>
<td>
<!-- 回填 -->
<input type="text" name="username" value="<%=request.getParameter("username")==null?"":request.getParameter("username") %>"/>
<span id="msg_username"></span>
</td>
</tr>
<tr>
<td class="tds">密码：</td>
<td>
<input type="password" name="password" value="<%=request.getParameter("password")==null?"":request.getParameter("password") %>"/>
<span></span>
</td>
</tr>
<tr>
<td class="tds">确认密码：</td>
<td>
<input type="password" name="password2" value="<%=request.getParameter("password2")==null?"":request.getParameter("password2") %>"/>
<span></span>
</td>
</tr>
<tr>
<td class="tds">昵称：</td>
<td>
<input type="text" name="nickname" value="<%=request.getParameter("nickname")==null?"":request.getParameter("nickname") %>"/>
<span></span>
</td>
</tr>
<tr>
<td class="tds">邮箱：</td>
<td>
<input type="text" name="email" value="<%=request.getParameter("email")==null?"":request.getParameter("email") %>"/>
<span></span>
</td>
</tr>
<tr>
<td class="tds">验证码：</td>
<td>
<input type="text" name="valistr"/>
<img src="img/regist/yzm.jpg" width="" height="" alt="" />
</td>
</tr>
<tr>
<td class="sub_td" colspan="2" class="tds">
<input type="submit" value="注册用户"/>
</td>
</tr>
</table>
</form>
</body>
</html>
regist.jsp
5.验证用户名是否已经被注册：AJAXC请求的更多相关文章
- ssh整合问题总结--使用struts2+Ajax+jquery验证用户名是否已被注册
在用户模块中的用户注册需求上,通常要进行用户名是否已被注册的验证,今天正好写了这个需求,把详细代码和所遇到的问题贴过来.在使用struts2+ajax时候,通常我们会返回json类型的数据,但是像上面 ...
- Ajax注册验证用户名是否存在 ——引自百度经验
Ajax注册验证用户名是否存在 http://jingyan.baidu.com/article/a948d6515fdf870a2dcd2e85.html
- Ajax验证用户名是否被注册
Ajax验证用户名是否被注册 var xmlHttp; function createXMLHttpRequest(){ // 创建XMLHttp请求对象 if(window.ActiveXObjec ...
- 《ajax学习》之ajax+JavaScript事件验证用户名是否可注册
当用户注册时,服务器数据库需要对用户输入的用户信息(以用户名为例子)进行验证,在不刷新页面的情况下又需要页面和服务器进行数据请求,最好的方法是用ajax异步请求. 一.实现思路: 1.用户输入信息 2 ...
- 原始js---JavaScript注册用正则验证用户名密码手机号邮箱验证码
注册文件 reg.html <html><style> #btn{ background-color: red; color:white; width: 235px; } sp ...
- Django——Ajax发送请求验证用户名是否被注册
场景: 用户注册的时候,输入用户名之后,Ajax发送请求到后端,后端验证该用户名是否已经被注册,然后返回到注册页面提示用户. 1.模型: from django.db import models cl ...
- 利用jQuery和Ajax实现检测用户名是否已经被注册
这是一个jQuery和Ajax的很基础的应用,是我出去面试时的一个面试题.当时脑子有点懵想了好久才知道该怎么去实现,现在回来再看了下书好好总结一下这个东西. 首先新建一个html文件,只有简单的几行代 ...
- AJAX实现无刷新验证用户名
register.php <html> <head> <meta http-equiv="content-type" content="te ...
- Java--- Ajax异步验证用户名是否存在
今天复习了一下 Ajax异步验证用户名是否存在,在下面我写三种,一般开发时候都用第三种 jQuery和Ajax结合的形式,下面就介绍三种,具体说明代码里就有啦,废话不多说,直接上代码: 第一种方式: ...
随机推荐
- Flask初级（三）flash使用模板
Project name :Flask_Plan 模板文件夹未在创建项目时设定的是templates 我们不能总是用return 每个页面去写html,老长了. flask提供了模板引擎,其实也是别人 ...
- JDBCTemplate使用
业务上,手机App(离线状态下的数据),在在线的时候需要往服务端上传,由于App上的SQLite数据库里的需要 同步数据的表 跟服务端的数据库表结构一致,所以为了同步数据的方便性,我们决定App在进行 ...
- 特征选择： 卡方检验、F 检验和互信息
特征选择是特征工程中的重要一环,其主要目的是从所有特征中选出相关特征 (relevant feature),或者说在不引起重要信息丢失的前提下去除掉无关特征 (irrelevant feature) ...
- Installing MIB in Ubuntu and Solving the Error “SNMP Cannot Find Module …”
Has noticed an error after executing the command snmpwalk with the indication of MIB instead of OID: ...
- srtvlet filter
Filter,过滤器,顾名思义,即是对数据等的过滤,预处理过程.为什么要引入过滤器呢?在平常访问网站的时候,有时候发一些敏感的信息,发出后显示时 就会将敏感信息用*等字符替代,这就是用过滤器对信息进行 ...
- memmove 对同一个指针不操作
memmove 对同一个指针不操作,所以调用memmove之前不用比较两个指针是否相同 void CTestDLLDlg::OnBnClickedButton6() { ; char* data = ...
- 【转】react的高阶组件
React进阶之高阶组件 前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只 ...
- Excel 设置下拉列表
1. 把列表的候选值写到一块区域, 可以说同Sheet也可以是另一个Sheet中. 2. 选中要设置的列, 选择 Data > Data Validation 3. 在Data Validati ...
- magento模板 -- 如何安装magento模板
在magento下面安装模板首先要了解magento的模板结构: 每个magento模板都包含如下的类似结构: --app/design/frontend/default/[模板名称] ------- ...
- caffe安装编译问题-ImportError: No module named caffe
问题描述 ~/Downloads/caffe$ python Python (default, Dec , ::) [GCC ] on linux2 Type "help", &q ...