欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

看到一个想收藏的的AJAX小列子

程序员文章站 2024-01-30 11:50:46
用户登录的验证可以使用 form 表单提交,也可以使用 ajax 技术异步提交。 AJAX 即 Asynchronous Javascript And XML(异步 JavaScript 和 XML),是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异 ......

用户登录的验证可以使用 form 表单提交,也可以使用 ajax 技术异步提交。

ajax 即 asynchronous javascript and xml(异步 javascript 和 xml),是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新。

这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 ajax)如果需要更新内容,必需重载整个网页面。

jquery ajax() 方法法是 jquery 底层 ajax 实现。

ajax() 方法有几个重要参数:

  $.ajax({
        url: "detail.html",  //发送请求的地址,string类型的参数
        data:{id:"id"},      //发送到服务器的数据,object或string类型的参数,如果已经不是字符串,将自动转换为字符串格式。
        type: "post",        //请求方式,默认为get,string类型的参数
        datatype:'json',     //预期服务器返回的数据类型,string类型的参数;可用类型有(xml,html,json,jsonp,text)
        timeout:1000,        //请求超时时间,毫秒
        async: true,         // 默认为true,所有请求均为异步请求,boolean类型的参数
        beforesend:function(xmlhttprequest){  //发送请求前调用的函数
        
        },
        complete:function(xmlhttprequest, textstatus){  //请求完成后调用的回调函数(请求成功或失败时均调用)
        
        },
        
        success:function(){  //请求成功后调用的回调函数
        
        },
        error:function(){  //请求失败时被调用的函数
        
        }
  });

示例:

验证用户登录前台代码

$("#loginbtn").click(function(){
    var user = new object();
    user.logincode = $.trim($("#logincode").val());
    user.password = $.trim($("#password").val());
    
    //前台的非空验证
    if(user.logincode == "" || user.logincode == null){
        $("#logincode").focus;
        $("#formtip").css("color","red");
        $("#formtip").html("对不起,登录账号不能为空。");
    }else if(user.password == "" || user.password == null){
        $("#password").focus;
        $("#formtip").css("color","red");
        $("#formtip").html("对不起,登录密码不能为空。");
    }else{
        $("#formtip").html("");
        //如果账号和密码都不为空,就进行 ajax 异步提交
        $.ajax({
            type:'post',  //提交方法是post
            url:'/login.html', //请求的路径
            data:{user:json.stringify(user)}, //以json字符串形式把 user 传到后台
            datatype:'html', //后台返回的数据类型是html文本
            timeout:1000,  //请求超时时间,毫秒
            error:function(){  //请求失败的回调方法
                $("#formtip").css("color","red");
                $("#formtip").html("登录失败!请重试。");
            },
            success:function(result){   //请求成功的回调方法
                if(result != "" && result == "success"){
                //若登录成功,跳转到"/main.html"
                    window.location.href='/main.html';
                }else if(result == "failed"){
                    $("#formtip").css("color","red");
                    $("#formtip").html("登录失败!请重试。");
                    $("#logincode").val('');
                    $("#password").val('');
                }else if(result == "nologincode"){
                    $("#formtip").css("color","red");
                    $("#formtip").html("登录账号不存在!请重试。");
                }else if(result == "pwderror"){
                    $("#formtip").css("color","red");
                    $("#formtip").html("登录密码错误!请重试。");
                }else if("nodata" == result){
                    $("#formtip").css("color","red");
                    $("#formtip").html("对不起,没有任何数据需要处理!请重试。");
                }
            }
        });
    }
});

验证用户登录后台代码

    /*@responsebody注解的作用是将 controller 的方法返回的对象通过适当的转换器转换为指定的格式之后,写入到 response 对象的 body 区,通常用来返回 json 数据或者是 xml 数据,需要注意的是,在使用此注解之后不会再走视图处理器,而是直接将数据写入到输入流中,他的效果等同于通过response对象输出指定格式的数据。*/
    @requestmapping("/login.html")
    @responsebody
    public object login(httpsession session,@requestparam string user){
    
    //后台非空验证
        if(user == null || "".equals(user)){
            return "nodata";
        }else{
        
        //user 转换成 json 对象,再转成 java 对象
            jsonobject userobject = jsonobject.fromobject(user);
            user userobj= (user)userobject.tobean(userobject, user.class);
            
            try {
                if(userservice.logincodeisexit(userobj) == 0){//不存在这个登录账号
                    return "nologincode";
                }else{
                    user _user = userservice.getloginuser(userobj);
                    
                    //登录成功
                    if(null != _user){
                        //当前用户存到session中
                        session.setattribute(constants.session_user, _user);
                        
                        //更新当前用户登录的lastlogintime
                        user updatelogintimeuser = new user();
                        updatelogintimeuser.setid(_user.getid());
                        updatelogintimeuser.setlastlogintime(new date());
                        userservice.modifyuser(updatelogintimeuser);
                        updatelogintimeuser = null;
                        return "success";
                    }else{
                      //密码错误
                        return "pwderror";
                    }
                }
            } catch (exception e) {
                return "failed";
            }
        }
    }

关于 ajax() 方法更多详细参数及使用方法参见 w3cschool手册



作者:jason_m_ho
链接:https://www.jianshu.com/p/d36d8cd508ed
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。