当前位置 : 主页 > 网络编程 > JavaScript >

ajax的简单封装

来源:互联网 收集:自由互联 发布时间:2021-07-03
项目中会用到很多的ajax请求,所以做了这个全局的供全项目使用 1. [代码] [JavaScript]代码 /** * 全局ajax,如果请求成功则回调相应的方法,失败则弹框提示 * @param type 请求方法 * @param data 请求
项目中会用到很多的ajax请求,所以做了这个全局的供全项目使用

1. [代码][JavaScript]代码    

/**
     * 全局ajax,如果请求成功则回调相应的方法,失败则弹框提示
     * @param type   请求方法
     * @param data   请求参数
     * @param url    请求url,不需要上下文,该方法会自动添加上下文
     * @param callback ajax请求成功后的回调方法,
     * @param backurl 请求成功后,页面跳转的url
     *
     * 当ajax执行成功后,会回调相应的方法,如backurl为null或""时,回调会携带执行后result中的data值,可进行后续操作(不提供)
     * backurl不为null或""时回调中只会回传backurl,在一般的增加,删除,修改是,都会返回前一个列表,所以提供ltServer.go方法
     * 返回前一个列表
     *
     */
    ltServer.ajax = function(type,data,url,callback,backurl){
        $.ajax({
            type : type,
            data : data,
            url : ltServer.content+url,
            beforeSend:function(){
                //TODO 加载动画
            },
            //在后台使用aop对所有的ajax请求做了动态的增强,所有ajax返回的都是标准的json格式
            //数据格式也是统一的
            success : function(result){
                   //弹框提示信息不管是否成功都会提示,使用的是jquery-confirm
                    $.dialog({
                        title : ltServer.title,
                        content: result.info,
                    });
                if(result.code == -1){
                    
                    //因为操作失败,所以移除提交按钮上的不可用状态,,,
                    $("button[type='submit']").removeAttr("disabled");
                    $("button[type='submit']").removeClass("disabled");
                }else {
                    if(ltServer.isNull(backurl)){//执行回调,返回执行后的数据
                        callback(result.data);
                    }else {
                        //延后执行页面跳转
                        window.setInterval(function(){
                            callback(backurl);
                        },1000);
                    }
                }
            },
            complete: function() {
                //TODO 移除加载动画
            }
        })
    }

2. [代码]删除提示框    

 /**
     * 删除确认框
     * @param message  提示信息
     * @param url      删除时的请求url,不需要上下文,方法会自动添加上下文
     * @param backurl  删除操作执行成功后的页面跳转url,如果为空,刷新的当前页面
     */
    ltServer.deleteConfirm = function(message,url,backurl){
        $.confirm({
            title: ltServer.title,
            content: message,
            confirm: function(){
                ltServer.deleteExecute(url,backurl);
            },
            cancel: function(){
            }
        });
    }

3. [代码]执行删除    

/**
     * 执行删除操作
     * @param url
     * @param backurl
     */
    ltServer.deleteExecute = function(url,backurl){
        if(!ltServer.isNull(backurl)){
            ltServer.ajax(ltServer.del,null,url,ltServer.go,backurl);
        }else{
            ltServer.ajax(ltServer.del,null,url,ltServer.reload(),null);
        }
    }

4. [代码]跳转    

/**
     * 跳转指定页面
     * @param data
     */
    ltServer.go = function(backurl){
        location.replace(ltServer.content+backurl);
    }

    /**
     * 本页刷新
     */
    ltServer.reload = function(){
        window.location.reload();
    }

5. [代码]调用方式    

//删除调用
ltServer.ajax(ltServer.del,null,"/article/deletearticle/"+id,reload,"");

//一般请求调用
ltServer.ajax(ltServer.post, null, "/article/toparticle/"+id, ltServer.go, "/article/articlelist?"+$("#search").serialize());

//自定义方法处理回调
ltServer.ajax(ltServer.post, null, "/article/indexshowarticle/"+id+"/"+colid, reload, "");

//回调方法
function reload(){
        //code
    }
网友评论