前端-3-【登录】Ajax验证

最新推荐文章于 2022-08-08 19:05:07 发布

那起舞的日子

最新推荐文章于 2022-08-08 19:05:07 发布

阅读量2.6k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/meiceatcsdn/article/details/79187489

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

话说：

各位读者，下午好啊，我是小美。那天给同事“洗脑”，分享了在“中国之声”听到的广告语——“把每天当做新年来过，敢梦敢想敢拼搏！”，结果被同事嘲笑了好久，说蛮适合传销的…..

还是那句口号：学会一样东西的感觉很快乐！如果能够创造一样东西，感觉会更加快乐！

1.登录界面展示
2.前端Ajax验证代码
3.后端代码
4.小结

难度系数：★☆☆☆☆
其实这篇应该算是bbs登录界面的优化，因为笔者前不久分类增加了前端，所以就写这里吧。当时前端只做了后台处理。

1.登录验证效果展示

这里写图片描述

2.前端Ajax验证代码

login.jsp

<!--引入jQuery  -->
<script src="js/jquery-1.8.3.js"></script>

!-- 前端Ajax验证用户名 -->
<script type="text/javascript">
    $(function() {

        //用户名异步验证
        $("#userName").blur(function() {
            //alert("失去焦点！");
            //获取userName的值  对用户名进行非空验证
            var userName = $(this).val().trim();
            if(userName == "" ||userName == null){
                $("#loginInfo").html("请输入用户名");
                $("#loginInfo").css({"color":"red","font-size":"15px","font-weight":"bolder"});
            }else{
                $("#loginInfo").html("");
            }


            //Ajax异步验证用户名是否存在？
            $.ajax({
                url:"getUserByUserName",//访问的Servlet
                async:true,//是否异步
                type:"get",//post
                data:{"userName":userName},//往Servlet或者 Controller发送数据
                success:function(data){//回调函数
                    console.log("进来了！");
                    console.log(data);//Object {userId: 4, userName: "admin2", userNick: "不三不四", password: "222222", rePassword: "222222"…} 如果没有数据：[]
                    var userNameInfo = ""; //定义用户名提示信息
                    if(data!="") {
                        console.log("用户存在");
                        userNameInfo = "√";
                        $("#userNameInfo").html(userNameInfo);
                        $("#userNameInfo").css({"color":"green","font-size":"25px","font-weight":"bolder"});
                    }else{
                        console.log("用户不存在！");
                        userNameInfo = "×";
                        $("#userNameInfo").html(userNameInfo);
                        $("#userNameInfo").css({"color":"red","font-size":"25px","font-weight":"bolder"});
                        $("#userName").focus();//聚焦直到输入正确为止

                    }


                },
                error:function(){
                    alert("报错啦！");
                },
                dataType:"json"//传送的数据类型
            });

        });


    //密码验证
    $("#password").blur(function() {
            //alert("进来了！");
            var password = $(this).val().trim();
            if(password =="") {
                $("#loginInfo").html("请填写密码");
                $(this).focus();
            }else{
                $("#loginInfo").html("");
            }
    });




    //验证码验证
    $("#code").blur(function(){
        //alert("进来了！");
        var code = $(this).val().trim();
        $.ajax({
            url:"ajaxCode",
            async:true,
            type:"get",
            dataType:"json",
            success:function(data) {
                console.log("后台传过来的验证码:"+data);
                console.log("前台接收的输入的验证码:"+code);
                 if(data  == password) {
                    alert("equal");
                    $("#loginInfo").html("888");
                }
                 if(data != password) {
                    $("#loginInfo").html("");//此处提示验证码有误！
                } 
            },
            error:function() {
                alert("验证码验证失败！");
            }

        });
    });


    })


</script>

还有onsubmit的js验证呢.

<!--引入外部JS  -->
<script type="text/javascript" src="js/login.js"></script> 

//登录简单验证
function checkLoginForm() {
    //alert("进来了");
    //获取表单元素
    var lgForm = document.loginForm;
    var userName = lgForm.userName.value;//这里用的是name选取，方便些！
    var password = lgForm.password.value;
    var code = lgForm.code.value;

    var lgInfo = document.getElementById("loginInfo");

    if(userName == "") {
        //alert("用户名为空!");
        lgInfo.innerHTML = "请填写【用户名】";
        lgForm.userName.focus();
        return false;
    }else if(password == "") {
        lgInfo.innerHTML = "请填写【密码】";
        lgForm.password.focus();
        return false;

    }else if(code == "") {
        lgInfo.innerHTML = "请填写【验证码】";
        lgForm.code.focus();
        return false;
    }else {
        return true;
    }

}

注意下判断的逻辑奥~

3.后端代码

这个后端是Servlet，换做框架，思路一致。

package com.hmc.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

/**
*
*2018年1月28日
*User:Meice
*上午11:44:34
*/
@WebServlet("/ajaxCode")
public class AjaxCodeServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    doPost(req, resp);
}


@Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String code =   (String)req.getSession().getAttribute("code");
        System.out.println("后端接收验证码:"+code);
        Gson gson = new Gson();
        String json = gson.toJson(code);
        System.out.println("转换后的验证码json格式为:"+json);//"rNb8"
        resp.getWriter().write(json);
    }
}

注意，这里没有配置web.xml,直接通过注解@WebServlet搞定！如果要配置的话，这么配置：

<!-- ================配置登录Ajax验证  注解方式省略此配置========================= -->
<!--   <servlet>
    <servlet-name>getUserByUserName</servlet-name>
    <servlet-class>com.hmc.controller.GetUserByUserNameServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>getUserByUserName</servlet-name>
        <url-pattern>/getUserByUserName</url-pattern>
    </servlet-mapping>
            -->

用框架是如何做的？在上一篇博客中有专门对比二者的，当时是2种方式实现验证码效果；这里更进一步，前后端值传递。

4.小结

1.Ajax请求成功！后台返回JSon也没问题，alert()无论success还是error，都没有效果！？
alert改为console.log试试，有可能你勾选了浏览器禁止alert的功能，导致alert没发弹出信息。。
搞定！花了我好几个小时，还以为哪里出了问题！console.log(“进来了！”);
平常开发的时候，有时候为了调试，往往会进入循环语句，这时候如果想提前终止弹窗，勾选弹窗下面的选项不让其再次弹出。但是下次如果想继续弹窗必须重启chrome！
除非返回的值明确是null才是null，否则[]这种在前端都表示空串，要用非空做判断”“

2.HttpServletResponse实例对象获得输出流有两种方式
①PrintWriter out=response.getWriter();
out对象用于输出字符流数据
②ServletOutputStream os=response.getOutputStream();//比如，图形验证码就是二进制的流写入，所以会用到第二种方式；os用于输出字符流数据或者二进制的字节流数据都可以
服务器将response对象中的内容做拆解响应给客户端。然后在检查该response的输出流有没有关闭，如果没有关闭就将输出流关闭。当response再有另外一个流被创建并尝试做输出时就会发生异常。所以response的两个输出流只能使用一个，不能同时使用两个输出流。这也是为我们没有关闭流程序不出错的原因，当然更提倡我们自己关闭流。
我当时为了在前端获取后端的验证码，尝试返回2个流….. 所以，为了获取这个值，需要在写一个Ajax！所以登录会用到2个Ajax！

3.验证码Servlet中把验证码在写入图片的之前存到session中，如果在页面直接${}获取，那么获取
到的验证码是前一个session中的。但是在后台从req.getSession.getAttribute(“code”)中获取到的就和页面验证码图片显示一致。所以如果要做验证，思路：还是要通过Ajax和后台交互，后台从session中取出值，返回给前台，前台直接做比较。

4.还是那句话：小小if判断顺序还是需要注意下：比如：

if(data != password) {
    $("#loginInfo").html("验证码有误~");
}else{
    $("#loginInfo").html("");
    }

这么写，如果验证码和输入一致，就不会清空提示！但是如果这么写，就有效果了.其实本质表达意思不是一致么？

if(data != password) {
    $("#loginInfo").html("验证码有误~");
}
 if(data == password) {
        $("#loginInfo").html("");
}

遗憾的是，中午效果好好的，下午就只进入！=，很是无语！暂且搁置…

5.验证码忽略大小写？
“”.equalsIgnoreCase(“”) 是Java中最便捷的方法，但是jQuery中呢？
网上查资料说是用:contains 有更简洁的方式吗？感觉那个也不是很好！
有非常简洁的方式么？当然是要自己写的，不要用什么工具包之类的。
就没有一个思路很明确的方法嘛？必须用到contains?

6.onsubmit(return checkLoginForm())方法自己用JS写就很溜，用jQuery写就捉襟见肘，不知道为啥。

7.有时候js和jQuery一块写，容易混淆。其实会发现，jQuery中用的基本都是方法，也就是封装好了的:
比如：.val().trim() .html() .css() 等等，js就有属性、方法区别，尽量用一致的吧。

8.前台后台交互，用Ajax；
后台如果是框架Controller层写的方法，那么直接用Gson 工具去返回json即可；
如果是Servlet，方法自然是void的，那么就用response.getWriter().write()来返回。

好了！暂且到这里，咱们下期再会！如果你看到了这篇博客，并且耐心看完了，欢迎评论交流~