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结合的形式,下面就介绍三种,具体说明代码里就有啦,废话不多说,直接上代码: 第一种方式: ...
随机推荐
- pymysql 返回数据为字典形式(key:value--列:值)
一.需求 在数据库的操作中,有时需要直接返回数据库表中的栏位名称+栏位值的key:value这种字典格式的方法. Python DB-API使用流程: 引入API模块. 获取与数据库的连接. 执行SQ ...
- dnspod 动态域名的使用。openwrt使用dnspod动态域名解析。
这里主要说的是linux shell下的使用. 先看接口说明: 接口地址: https://dnsapi.cn/Record.Ddns HTTP请求方式: POST 请求参数: 公共参数 domain ...
- SimpleXML php 解析xml 的方法
SimpleXML是PHP5后提供的一套简单易用的xml工具集,可以把xml转换成方便处理的对象,也可以组织生成xml数据.不过它不适用于包含namespace的xml,而且要保证xml格式完整(we ...
- scrapy的selectors
from scrapy import Selector >>> doc = """ ... <div> ... <ul> ...
- 移动端自动化openatx开源项目介绍，pytest并发测试框架结合
开头 相信不少用过appium的同学,对于使用appium的一些体会与感受是否与我相似 1. appium启动服务和app程序非常慢 2. appium多线程并发需要启动多个服务 3. appium必 ...
- STM32 LSM6DSL 陀螺仪数据采集
/************************************************************************************ * STM32 LSM6DS ...
- socket can demo
http://www.cnblogs.com/zengjfgit/p/5327689.html
- 通过Servlet设置文件下载
文件下载 1.获取要下载的文件的绝对路径 但是使用getServletContext().getRealPath()方法在不同的服务器上所获得的实现是不一样的 因为项目被打包入.war文件以后就失去了 ...
- Linux操作系统网络配置
- 在 Roslyn 分析语法树时添加条件编译符号的支持
我们在代码中会写 #if DEBUG 或者 [Conditional("DEBUG")] 来使用已经定义好的条件编译符号.而定义条件编译符号可以在代码中使用 #define WAL ...