异步校验用户名是否存在----JQuery-ajax

案例--异步校验用户名是否存在

实现效果

image.png

image.png

在注册页面，当用户输入完用户名，鼠标失去焦点后，通过ajax自动校验用户名是否存在，通过js动态提示信息

image.png

失去焦点执行功能
为输入框绑定onblur事件 = function（）{
1、获得表单输入的数据
2、Ajax将用户名提交到服务器去校验
3、根据ajax返回的结果 动态提示用户名是否可用
}

前台页面相关代码：

<script type="text/javascript">
    $(function(){
        
        //为输入框绑定事件
        $("#username").blur(function(){
            //1、失去焦点，获取输入框的内容
            //var usernameInput = $("#username").val();
            //var usernameInput = this.value;
            var usernameInput = $(this).val();
            //2、去服务器校验该用户是否存在----ajax
            $.post(
                "${pageContext.request.contextPath}/chechUsername",
                {"username":usernameInput},
                function(data){
                    var isExist = data.isExist;
                    //3、根据返回的isExist动态得显示信息
                    var usernameInfo = "";
                    if(isExist){
                        //该用户存在
                        usernameInfo = "该用户名已经存在";
                        $("#usernameInfo").css("color","red");
                    }else{
                        usernameInfo = "该用户名可以使用";
                        $("#usernameInfo").css("color","green");
                    }
                    $("#usernameInfo").html(usernameInfo);
                },
                "json"
            
            );
        });
        
        
    });


<div class="col-sm-6">
                            <input type="text" class="form-control" id="username"
                                placeholder="请输入用户名">
                            <span id="usernameInfo"></span>
                        </div>

web层servlet代码：

package com.zys.web;

import java.io.IOException;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.zys.service.UserService;

public class ChechUsernameServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //获得要校验的用户名
        String username = request.getParameter("username");
        //传递username到service
        UserService service = new UserService();
        boolean isExist = false;
        try {
            isExist = service.checkUsername(username);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        
        //把得到的结果数据以json格式写给ajax引擎
        //{"isExist":isExist}
        response.getWriter().write("{\"isExist\":"+isExist+"}");
        
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
}

service层代码：

package com.zys.service;

import java.sql.SQLException;

import com.zys.dao.UserDao;

public class UserService {

    public boolean checkUsername(String username) throws SQLException {
        UserDao dao = new UserDao();
        Long isExist = dao.checkUsername(username);
        
        return isExist>0?true:false;
    }

}

dao层代码：

package com.zys.dao;

import java.sql.SQLException;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.ScalarHandler;

import com.zys.utils.DataSourceUtils;

public class UserDao {

    public Long checkUsername(String username) throws SQLException {
        QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
        String sql = "select count(*) from user where username= ?";
        Long query = (Long) runner.query(sql, new ScalarHandler(), username);
        return query;
    }

}