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实现预加载图片的方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画 廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发 ...
随机推荐
- 软件开发的一些"心法"
从事软件开发也有好几年了,和一开始那个懵懵懂懂的小菜鸟相比,自己也感觉到了一些变化. 也许是熟能生巧, 趟过很多坑,但核心的绝不是这些细节的东西. 打个比方,如果说对某种语言的特性和技巧的掌握属于身法 ...
- JavaScript中return的用法和this的用法详解
JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对this和函数中的return的用法和意思理解的比较模糊,这里写一篇博客跟大家一起探讨一下return和this的 ...
- 腾讯ISUX网页前端代码分析
看了一下腾讯ISUX网页,无论是pc端还是移动端,展示都挺好看的,先对其代码进行分析如下: 1,先看前三行代码 <!DOCTYPE html> <!-- 腾讯 ISUX 是腾讯集团核 ...
- Docker - 在Ubuntu16.04中安装Docker CE
Get Docker for Ubuntu Check system version root@Ubuntu16:~# uname -a Linux Ubuntu16 4.8.0-36-generic ...
- JavaScript ,Python,java,Go系列算法之选择排序
常见的内部排序算法有:插入排序.希尔排序.选择排序.冒泡排序.归并排序.快速排序.堆排序.基数排序等. 用一张图概括: 选择排序 选择排序是一种简单直观的排序算法,无论什么数据进去都是O(n2) ...
- 如何用Ettercap实现“中间人攻击”（附下载链接）
什么是“中间人攻击”? 中间人攻击(Man-in-the-Middle Attack,简称“MiTM攻击”)是一种“间接”的入侵攻击,这种攻击模式是通过各种技术手段将受入侵者控制的一台计算机虚拟放置在 ...
- 【JAVAWEB学习笔记】18_el&jstl&javaee的开发模式
一.EL技术 1．EL 表达式概述 EL(Express Lanuage)表达式可以嵌入在jsp页面内部,减少jsp脚本的编写,EL 出现的目的是要替代jsp页面中脚本的编写. 2．EL从域中取出数据 ...
- Python爬虫01——第一个小爬虫
Python小爬虫——贴吧图片的爬取 在对Python有了一定的基础学习后,进行贴吧图片抓取小程序的编写. 目标: 首先肯定要实现图片抓取这个基本功能 然后实现对用户所给的链接进行抓取 最后要有一定的 ...
- 通过Percona Xtrabackup实现数据的备份与恢复
Xtrabackup简介 Percona XtraBackup是一个开源.免费的MySQL热备份软件,能够为InnoDB和XtraDB数据库执行非阻塞备份,特点如下: 1.快速.可靠的完成备份 2.备 ...
- js的event事件
一 . 焦点:使浏览器能够区分区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入. 我们可以通过一些方式给元素设置焦点 1.点击 2.tab 3.js 不是所有元素都能够接受 ...