利用jQuery采用Ajax异步加载的方式检验用户信息

小半 • 2023年1月29日下午4:18 • 技术随笔 • 阅读 87

采用jQuery采用Ajax异步加载的方式检验用户名是否存在

1. jsp页面代码：

使用jQuery一定要记得导入jQuery资源。

<!-- 引用jQuery库文件 -->
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script>
        //采用ajax异步加载验证用户名是否存在
        $(function () {
           $("input[name='loginname']").blur(
               function () {
                   //获取用户名元素的值
                   var userName = $(this).val()
                   //发送异步请求,请求方式是POST
                   //参数1：请求的目的路径
                   //参数2：要发送给Servlet的请求参数
                   //参数3：服务器端处理成功后要立即调用的函数(回调函数)，
                   //回调函数上的result参数就代表了服务器端响应回来的结果
                   $.post(
                       "${pageContext.request.contextPath}/teacher.do",
                       {"userName": userName},  //以json的格式传递数据
                        function (result) {
                            //如果result==1说明，数据库中存在该用户名，反之，不存在
                            if (result == 1)
                                $("#checkUserName").html("该用户名已经存在！").css("color", "red"); //css中多个属性用css({"key1":"value11", "key2";"value2"})
                            else
                                $("#checkUserName").html("√").css("color", "green");
                        }
                   );
               }
           )
        })
    </script>

2. servlet层的代码：

//检验用户名是否存在
    protected void checkLoginName(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取用户名
        String loginname = req.getParameter("loginname");
        TeacherService teacherService = new TeacherServiceImpl();
        int i = teacherService.selectUserCount(loginname);
        //设置相应格式
        resp.setContentType("text/html;charset=UTF-8");
        //将用户名对应的总记录数响应给浏览器
        PrintWriter out = resp.getWriter();
        out.write(i+"");     //最好传字符串，不然浏览器可能识别不了，导致乱码
        //关闭流
        out.close();
    }