用Ajax完成注册时用户名的效验--------------

导入需要使用的包

          c3p0
          dbutil
          mysql

在jsp页面创建注册界面

用户名:
密码
邮箱
简介

在注册界面jsp中添加Ajax

这个代码是固定的,用来创建Ajax,就像jar包一样

<script type="text/javascript">
//1. 创建对象
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}

以下代码是需要根据自己需要编写的

function checkUserName() {
//获取输入框的值 document 整个网页 根据id获取文本框的值
var name = document.getElementById("name").value;
//1. 创建对象
var request = ajaxFunction();
//2. 发送请求
request.open("POST" ,"/day16/CheckUserNameServlet" , true );
//注册状态改变监听,获取服务器传送过来的数据 如果等号左边成立就执行等号右边的值
request.onreadystatechange = function(){
//判断是否是4:请求已完成 ,并且是请求成功200
if(request.readyState == 4 && request.status == 200){
//获取后端发送过来的信息
var data = request.responseText;
if(data == 1){
//根据id向文本框内填入值
document.getElementById("span01").innerHTML = "<font color='red'>用户名已存在!</font>";
}else{
document.getElementById("span01").innerHTML = "<font color='green'>用户名可用!</font>";
}
}
}
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//向后端传值
request.send("name="+name);
}
</script>

完成servlet

        response.setContentType("text/html;charset=utf-8");
        String name = request.getParameter("name");
        try {
            checkdao check=new checkImpl();
            boolean checkR=check.checkUsername(name);
            if(checkR){
                response.getWriter().println(1);
                System.out.println(1);
            }else{
                response.getWriter().println(0);
                System.out.println(0);
            }
            System.out.println(  name+"  "+checkR);

        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

完成dao和其实现类


        QueryRunner queryRunner = new QueryRunner(new ComboPoolDataSource());
        long query =(Long)queryRunner.query("select count(*) from user where username=?", new ScalarHandler(),username);
        return query>0;
    }

注意事项

post请求向后端传数据的时候必须要加上
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
然后再向后端传值
request.send(“name=”+name);

猜你喜欢

转载自blog.csdn.net/qq_42799000/article/details/82594678