Web前端优雅的显示网络请求进度条

最新推荐文章于 2024-08-02 08:04:42 发布

ITPlus

最新推荐文章于 2024-08-02 08:04:42 发布

阅读量2.3k

点赞数

分类专栏： js 文章标签： web前端网络

本文链接：https://blog.csdn.net/Jiang_Rong_Tao/article/details/78188148

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Java程序员写Js我就是喜欢写“；” 没办法。好久没写android了，最近是后台前端都在搞，尤其喜欢$(this),记录每一天的生活

httpUtils.js如下

/**
 * 网络请求
 * @author jiangrongtao
 * Created by on 2017-10-8.
 */
/**
 * 访问方式 get 和 post
 * @type {string}
 */
var REQUEST_POST='post';
var REQUEST_GET='get';
/**
 * 超时时间
 */
var OUT_TIME_LEVAl_1=1000;
var OUT_TIME_LEVAl_2=2000;
var OUT_TIME_LEVAl_3=3000;
/**
 *
 * @param url 请求路径
 * @param timeout 超时时间
 * @param data 提交参数
 * @param successCallBack 请求成功的回调
 * @param errorCallBcak 请求失败的回调
 * @param msg 进度条显示的信息
 * @param requestType 请求方式get post
 */
function httpAjax(url,timeout,requestType,data,successCallBack,errorCallBcak,msg){
    var isShow=false;
    //显示进度条
    if(!isShow){
        showLoading(msg);
        isShow=true;
    }
    $.ajax({
        url:url,
        timeout : timeout,
        type : requestType,
        data :data,
        dataType:'json',
        success:function(result){
            // 去掉进度条
            if(isShow){
            hiddleLoading();
                isShow=false;
            }
            console.log("success");
            successCallBack(result);
        },
        error:function (XMLHttpRequest,errorMsg,ex) {
            // 去掉进度条
            if(isShow){
                hiddleLoading();
                isShow=false;
            }
            console.log("error");
            errorCallBcak(errorMsg);
        }
    });
}

/**
 * 显示进度条
 * @param msg 进度条下面显示的内容
 */
function showLoading(msg) {
        var ahtml="<div class='loading'> <div class='pic'> <img src='image/loading.svg' width='80px' height='80px' ><br>"+msg+"</div></div>" ;
        $("body").append(ahtml);
}

/**
 * 隐藏进度条
 */
function hiddleLoading() {
        $(".loading").fadeOut(100);
}

进度条的样式可以参考我的这篇web前端动态添加进度条

具体的使用场景一般在onclick中

     $(document).ready(function(){
          httpAjax(SELECT_USER_BY_ID,OUT_TIME_LEVAl_3,REQUEST_GET,null,
                function successCallBack(result) {
                    console.log(result);
                    initData(result.status);
                },function errorCallBcak(errorMsg){
                    var errorContent = '<p>请求服务失败，请稍后<a href="xxx.html" style="color:blue">重试</a>！</p>';
                    $("body").html(errorContent);
                },'加载中...');
        });