jQuery Ajax封装(附带加载提示和请求结果提示模版)

时间:2021-03-26 06:16:56

1、创建HTML文件(demo)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>jQuery Ajax</title>
    <script type="text/javascript" src="jquery-3.2.0.min.js"></script>
    <style type="text/css">
        button{
            border: none;
            outline: none;
            background: rgba(225,0,0,0.88);
            padding: 5px 50px;
            color: #EFEFEF;
            font-size: 16px;
            font-weight: bold;
            border-radius: 0 8px 8px 8px;
            letter-spacing: 5px;
            }
    </style>
</head>
<body>
    <article class="demo">
        <button type="button" id="jpost">Post</button>
        <button type="button" id="jget">Get</button>
</article>
</body>
</html>

2、创建加载提示模版并添加CSS样式

//JavaScript部分
var load = { init:function(){ //请求开始 var article = document.createElement('article') article.className = 'loader' var div = document.createElement('div') div.className = 'loading' var tips = ['拼','命','加','载','中','···'] for(var index = 0;index<tips.length;index++){ var span = document.createElement('span') span.innerHTML = tips[index] div.appendChild(span) } article.appendChild(div) var body = document.getElementsByTagName('body')[0] body.appendChild(article) }, remove:function(){ //请求完成 var body = document.getElementsByTagName('body')[0] var loadText = document.getElementsByClassName('loader')[0] console.log(loadText) body.removeChild(loadText) } }
//CSS样式部分
.loader .loading span{ display: inline-block; position: relative; margin: 5px; } .loader .loading span:nth-child(even){ animation: moveup 2s linear infinite; } .loader .loading span:nth-child(odd){ animation: movedown 2s linear infinite; } @keyframes movedown{ 0%{bottom: 3px;} 50%{bottom:-3px;} 100%{bottom: 3px;} } @keyframes moveup{ 0%{top: 3px;} 50%{top:-3px;} 100%{top: 3px;} }

 3、创建请求提示模版并添加CSS样式

//JavaScript部分
function tip(tipMsg,time){ tipMsg = tipMsg|| '请求异常,请联系客服!' //默认提示信息 time = time || 3000 //默认提示时间 var addTip = document.createElement('article') addTip.className = 'tip-msg' var addText = document.createElement('p') addText.innerHTML = tipMsg addTip.appendChild(addText) var body = document.getElementsByTagName('body')[0] body.appendChild(addTip) setTimeout(function(){ //移除提示 var removeTip = document.getElementsByClassName('tip-msg')[0] body.removeChild(removeTip) },time) }
//CSS样式部分
.tip-msg{ width: 100%; text-align: center; position: fixed; top: 30%; z-index:; } .tip-msg>p{ display: inline-block !important; background-color: rgba(0,0,0,0.8); color: #FFFFFF; padding: 2px 8px; border-radius: 5px; }

4、封装jQuery Ajax 方法

function baseAjax(requestPath, requestData,requestType,succCallback, errorCallback, dataType){
                    /*requestPath:请求路径
                     requestData:请求参数,默认为空
                     requestType:请求方式("POST" 或 "GET"), 默认为 "GET"
                     succCallback:请求成功回调函数
                     errorCallback:请求失败回调函数
                     dataType:预期服务器返回的数据类型, 默认为 JSON */
                    requestData = requestData || {}
                    requestType = requestType || 'GET'
                    dataType = dataType || 'JSON'
                    $.ajax({
                        url:requestPath,               //请求地址
                        type:requestType,              //请求类型
                        data:requestData,              //请求数据
                        timeout:100000,                //请求超时时间(毫秒)
                        beforeSend:function(){
                            load.init()                //发送请求之前,插入加载提示信息“拼命加载中···”
                        },
                        success:function(res){         //请求成功
                            if(res.message == 'OK'){   //res.message不是唯一,也有可能是res.code 需结合项目实际场景来写入判断条件
                                if(succCallback){
                                    succCallback(res)  //返回OK回调函数,将返回的数据res传入到该回调函数中
                                    }
                            }else{
                                if(errorCallback){
                                    errorCallback(res) //返回不是OK时回调函数,将返回的数据res传入到该回调函数中
                                    }
                            }
                        },
                        complete:function(res,status){
                            load.remove()             //请求完成 移除加载提示“拼命加载中···”
                        },
                        error:function(){
                            tip()                     //请求错误,弹出提示
                        }
                    })
                }
                

5、再次封装上面的jQuery Ajax 方法

function jPost(path,data,succCallback,errorCallback){
         //再次封装-有参数
         baseAjax(path,data,'POST',succCallback,errorCallback)
}
 function noParameterJPost(path,succCallback,errorCallback){
         //再次封装-无参数
         baseAjax(path,{},'POST',succCallback,errorCallback)
}

function jGet(path,data,succCallback,errorCallback){
         //再次封装-有参数
         baseAjax(path,data,'GET',succCallback,errorCallback)
}
function noParameterJGet(path,succCallback,errorCallback){
         //再次封装-无参数
          baseAjax(path,{},'GET',succCallback,errorCallback)
}
//只写了这两种类型请求方法,其他方式依次类推

6、使用上面封装的 jPost() 和 jGet()方法演示两个请求

$("#jpost").on('click',function(){
                    jPost('http://api.36wu.com/Mobile/GetMobileOwnership',{
                        mobile:15988886666,
                        format:'json',
                        authkey:'5f5d61494c8d41de854f853978aefe696'
                    },function(res){
                        tip(res.status,1500)                            //请求成功,且 res.status == 'OK'
                    },function(res){
                        tip(res.status+'&nbsp;:&nbsp;'+res.message,1500)//请求成功,且 res.status != 'OK',弹出服务器返回的错误信息
                    })
                    })

                $("#jget").on('click',function(){
                    jGet('http://api.36wu.com/Ip/GetIpInfo',{
                        ip:'192.168.1.106',
                        format:'json',
                        authkey:'5f5d61494c8d41de854f853978aefe69'
                    },function(res){
                        tip(res.status,1500)                              //请求成功,且 res.status == 'OK'
                    },function(res){
                        tip(res.status+'&nbsp;:&nbsp;'+res.message,1500) //请求成功,且 res.status != 'OK',弹出服务器返回的错误信息
                    })
                })

说明:写的不好请不要建议,有任何疑问欢迎沟通交流 QQ:306344599