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结合的形式,下面就介绍三种,具体说明代码里就有啦,废话不多说,直接上代码: 第一种方式: ...

随机推荐

使用word2013写博客
额额要使用的话首先要配置一下: 选择word2013的创建,然后点击模版,搜索博客. 然后就是创建账户了,账户主要填写的下面这些信息: 注意,cnblogs后面的子域名应该使用你自己的子域名下面 ...
ExceptionHandler 异常公共处理
异常的公共处理很多种,采用注解的方式,拦截器的方式等都可以,我采用的是继承 AbstractHandlerExceptionResolver 来实现, 上代码 package com.yun.util ...
Bad update sites
Bad update sites com.genuitec.pulse2.client.common.launcher.BadUpdateSiteException Software being in ...
C#winform菜单权限分配，与菜单同步的treeView树状菜单权限控制使用心得
在网上查了很多,发现没有讲述关于--C#winform菜单权限分配,与菜单同步的treeView树状菜单权限控制使用--的资料自己研究了一个使用方法.下面来看看. 我有两个窗体:LOGINFRM,M ...
Vue2.0 分页插件pagination使用详细说明
Vue2.0 分页pagination使用插件下载地址:Vue_Pagination 插件描述:基于jQuery的分页插件大家都用过很多了吧,今天分享一下基于Vue的分页插件pagination.j ...
IPM
#if 0 void xyp2ipmp(cv::Mat& xyp, cv::Mat& ipmp, cv::Mat& xylim, Size& sz){ //xylimi ...
Mac下百度网盘破解
Mac版百度网盘破解先下载正版的百度网盘打开终端输入命令 cd ~/Downloads && git clone https://github.com/CodeTips/Baid ...
Visual Studio Code 使用指南
安装 VSCode是微软推出的一款轻量编辑器,采取了和VS相同的UI界面,搭配合适的插件可以优化前端开发的体验. HTML Snippets:增强了zen-coding,增加了H5的自动补全,安 ...
UVa 10410 树重建
Tree Reconstruction Problem Description You have just finished a compiler design homework question w ...
Oracle:Decode在时间范围中的使用
做查询的时候需要下一个sql,需要select test_time出来,如果test_Time的HH24:Mi:SS在7:00:00和19:00:00返回白班,否则返回夜班 select case w ...

5.验证用户名是否已经被注册：AJAXC请求

5.验证用户名是否已经被注册：AJAXC请求的更多相关文章

随机推荐

热门专题