标签：ajax ror har class 为我 set border function z-index
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: 100; } .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:‘5f5d61494c8d41de854f853978aee696‘
},function(res){
tip(res.status,1500) //请求成功，且 res.status == ‘OK‘
},function(res){
tip(res.status+‘ ： ‘+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:‘5f5d61494c8d41de854f853978aefe9‘
},function(res){
tip(res.status,1500) //请求成功，且 res.status == ‘OK‘
},function(res){
tip(res.status+‘ ： ‘+res.message,1500) //请求成功，且 res.status ！= ‘OK‘，弹出服务器返回的错误信息
})
})
后续持续更新中·······
因为我们相信，没有最好，只有更好！
同时也欢迎各位朋友提出宝贵的意见！不胜感激！
沟通交流：QQ(306344599)
jQuery Ajax封装（附带加载提示和请求结果提示模版）
标签：ajax ror har class 为我 set border function z-index
原文地址：http://www.cnblogs.com/yandejun/p/7073618.html
