jQuery Ajax封装(附带加载提示和请求结果提示模版)
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+' : '+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+' : '+res.message,1500) //请求成功,且 res.status != 'OK',弹出服务器返回的错误信息 }) })
说明:写的不好请不要建议,有任何疑问欢迎沟通交流 QQ:306344599
jQuery Ajax封装(附带加载提示和请求结果提示模版)的更多相关文章
- jQuery ajax瀑布流加载静态的列表页面
1.加载一行数据 <script> //滚动加载事件 var Loadurl = "{$url}"; if(window.location.href !== Loadu ...
- JQuery ajax 滚动底部加载更多
<%@ Page Language="C#" %> <%@ Import Namespace="System.IO" %> <%@ ...
- jquery+ajax无刷新加载数据,新闻浏览更多
<script type="text/javascript"> $(document).ready(function (){ $(window).scroll(fu ...
- [转]jquery的ajax交付时“加载中”提示的处理方法
本文转自:http://www.educity.cn/wenda/77121.html jquery的ajax提交时“加载中”提示的处理方法 方法1:使用ajaxStart方法定义一个全局的“加 ...
- jquery的ajax提交时“加载中”提示的处理方法
方法1:使用ajaxStart方法定义一个全局的“加载中...”提示 $(function(){ $("#loading").ajaxStart(function(){ ...
- jquery中ajax跨域加载
今天学习ajax跨域加载,先来一段代码,异步加载的链接是爱奇艺的开源,我直接拿来用作测试 <!DOCTYPE html> <html lang="en"> ...
- jquery的ajax提交时加载处理方法
1.定义全局的,就是所有的ajax的请求的加载都会出现相同的提示 $(function(){ //加载成功显示的状态 $("#showLoading").ajaxSuccess(f ...
- 【Jquery mobile】动态加载ListView 转
[Jquery mobile]动态加载ListView 分类: Jquery Mobile2011-12-01 09:04 13984人阅读 评论(1) 收藏 举报 jquerylistviewmob ...
- ajax请求原理及jquery $.ajax封装全解析
.ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...
- CSS和JavaScript以及Ajax实现预加载图片的方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画 廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发 ...
随机推荐
- Lua调试:getinfo详解
getinfo是调试Lua程序时一个很重要很常见的函数,主要用于获取函数调用的基本信息.这个函数的难点在于各个参数的含义.下面一一介绍. 一.函数简介: 1.原型:getinfo(level, arg ...
- 将 Eclipse 的配色改为黑底白字
1.先到 eclipsecolorthemes下载一个主题. 2.Eclipse File-->Import 3.Import视窗内选择 General-->Preferences 4.选 ...
- python中从文件中读取数据
# average5.py def main(): fileName = input("What file are the numbers in?") infile = open( ...
- 学习MVC之租房网站(七)-房源管理和配图上传
在上一篇<学习MVC之租房网站(六)-用户登录和权限控制>完成了后台用户登录和权限控制功能的开发,接下来要完成的是房源的管理,用户在后台新增.编辑房源信息,供前台用户操作. 一 房源管理 ...
- 栅栏——CyclicBarrier
栅栏CyclicBarrier和闭锁CountDownLatch类似,可以说它们都是用来计数,都能阻塞一组线程知道某个事件发生.不同的是闭锁用于等待事件,而栅栏用于等待其他线程. 在前一篇<Co ...
- Spring切面通知执行的顺序(Advice Order)
问题描述 如果在Spring的程序中同时定义了环绕通知(Around)和前置通知(Before)..那么,有以下问题: 1.怎么让两个切面通知都起作用 2.或者让两者切面按自己指定的顺序进行执行? 3 ...
- Linux下Samba服务器的安装和配置
第一步:sudo apt-get install samba smbclient 安装samba服务器. 第二步:打开/etc/samba/smb.conf文件,在末尾添加下面的字段: [用户名] c ...
- 小议 - 来自《XX时代XX公司》的笔试编程题目
经过几天的雾霾,魔都终于放晴了.哥投了几天的简历,希望找到一份.NET开发方面的岗位.也收到了几个面试邀请.这不应Ge老师的要求,选了个良辰吉日,带着身份证,学位证怀揣着2B青年的梦想来这个XX公司面 ...
- Random Forest Classification of Mushrooms
There is a plethora of classification algorithms available to people who have a bit of coding experi ...
- Libevent源码分析—event_set()
初始化完event_base后,下面要初始化event,通过调用event_set()实现 .相关源码位于event.c event_set() void event_set(struct event ...