做项目中，请求后台项目自己封装的jq ajax 和加载提示

最新推荐文章于 2022-06-01 20:24:18 发布

原创最新推荐文章于 2022-06-01 20:24:18 发布 · 385 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用Ajax进行异步加载，并通过示例展示了API数据请求的具体实现过程，包括显示和隐藏加载提示的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(function () {
    hideLoading();  //加载提示，一开始是先隐藏的。
});

//API所在地址根目录

var APISITEROOT = "请求地址";

function GetPostApiData(postUrl, postDatas, isdontShowMessage) {
    //显示正在加载
    showLoading(); //如下图所示，加载提示圆圈
    var resultDatas;
    var reqUrl = postUrl;
    $.ajax({
        type: "post",
        async: false,
        url: APISITEROOT + reqUrl,
        data: postDatas,
        dataType: "json",
        headers: { 'SESSIONID': getCookie("userid") },
        success: function (data) {
            //隐藏正在加载
            hideLoading();
            if (data.Rescode == "8888") {
                if (!ISDEBUG) {
                    window.location.href = "/index.html";
                } else { alert(reqUrl) }
            }
            if (data.Rescode != "0000") {
                resultDatas = data;
            }
            else {
                resultDatas = data;
            }
        },
        error: function () {
            //隐藏正在加载
            hideLoading();
            //alert("请查看是否允许您的手机访问网络。");
            resultDatas = {
                Rescode: "9999",
                Resmessage: "请查看是否允许您的手机访问网络"
            }
        }

    });
    return resultDatas;
}




/*----------------页面加载事件---------------*/
//显示正在加载
function showLoading() {
    $(".loadingbglayer").show();
}
//隐藏正在加载
function hideLoading() {
    $(".loadingbglayer").hide();
}
/*----------------页面加载事件---------------*/

加载提示代码放在页面body最上面

<div class="loadingbglayer">
        <div id="loading"></div>
    </div>

css

/*----------正在加载------------*/
.loadingbglayer {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99;
    background-color: #333;
    opacity: 0.6;
}

#loading {           转圈圈的图片
    background: url('../../images/loading_red.gif') center no-repeat;
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -1rem;
    margin-left: -1rem;
    opacity: 0.9;
    z-index: 40;
    border-radius: 0.2rem;
}
/*----------正在加载------------*/