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

jQuery Ajax封装（附带加载提示和请求结果提示模版）的更多相关文章

  1. jQuery ajax瀑布流加载静态的列表页面

    1.加载一行数据 <script> //滚动加载事件 var Loadurl = "{$url}"; if(window.location.href !== Loadu ...

  2. JQuery ajax 滚动底部加载更多

    <%@ Page Language="C#" %> <%@ Import Namespace="System.IO" %> <%@ ...

  3. jquery+ajax无刷新加载数据，新闻浏览更多

      <script type="text/javascript"> $(document).ready(function (){ $(window).scroll(fu ...

  4. [转]jquery的ajax交付时“加载中”提示的处理方法

    本文转自:http://www.educity.cn/wenda/77121.html jquery的ajax提交时“加载中”提示的处理方法    方法1:使用ajaxStart方法定义一个全局的“加 ...

  5. jquery的ajax提交时“加载中”提示的处理方法

    方法1:使用ajaxStart方法定义一个全局的“加载中...”提示 $(function(){    $("#loading").ajaxStart(function(){    ...

  6. jquery中ajax跨域加载

    今天学习ajax跨域加载,先来一段代码,异步加载的链接是爱奇艺的开源,我直接拿来用作测试 <!DOCTYPE html> <html lang="en"> ...

  7. jquery的ajax提交时加载处理方法

    1.定义全局的,就是所有的ajax的请求的加载都会出现相同的提示 $(function(){ //加载成功显示的状态 $("#showLoading").ajaxSuccess(f ...

  8. 【Jquery mobile】动态加载ListView 转

    [Jquery mobile]动态加载ListView 分类: Jquery Mobile2011-12-01 09:04 13984人阅读 评论(1) 收藏 举报 jquerylistviewmob ...

  9. ajax请求原理及jquery $.ajax封装全解析

    .ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...

  10. CSS和JavaScript以及Ajax实现预加载图片的方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画 廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发 ...

随机推荐

  1. 软件开发的一些"心法"

    从事软件开发也有好几年了,和一开始那个懵懵懂懂的小菜鸟相比,自己也感觉到了一些变化. 也许是熟能生巧, 趟过很多坑,但核心的绝不是这些细节的东西. 打个比方,如果说对某种语言的特性和技巧的掌握属于身法 ...

  2. html部署到tomcat

    首先电脑上应该装好java和Tomcat,并设置好它们的环境变量. 设置完成后,启动Tomcat ,点击\bin\tomcat6,打开浏览器输入网址:http://localhost:8080,如果出 ...

  3. 关于“Xshell连接linux（deepin）时提示ssh服务器拒绝了密码，请再试一次”的问题

    用Xshell root连接时显示ssh服务器拒绝了密码,应该是应该是sshd的设置不允许root用户用密码远程登录 修改 /etc/ssh/sshd_config文件,注意,安装了openssh才会 ...

  4. java环境安装之不能安装exe文件

    经过多年,打算再学下java 从官网下载java8安装包,但因为我的计算机的cd-room被卸载掉了,安装是报错说cab文件损坏之类的错误. 从stackOverflow中找到一篇眼前一亮的解决办法. ...

  5. 学习笔记：JavaScript-入门篇

    1.对话框,输出框,警告框   1. document.write() 可用于直接向 HTML 输出流写内容.简单的说就是直接在网页中输出内容.   2.alert(字符串或变量);   3.conf ...

  6. JAVA并发编程实战---第三章：对象的共享

    在没有同步的情况下,编译器.处理器以及运行时等都可能对操作的执行顺序进行一些意想不到的调整.在缺乏足够同步的多线程程序中,要对内存操作的执行顺序进行判断几乎无法得到正确的结果. 非原子的64位操作 当 ...

  7. 3.从AbstractQueuedSynchronizer(AQS)说起(2)——共享模式的锁获取与释放

    在上节中解析了AbstractQueuedSynchronizer(AQS)中独占模式对同步状态获取和释放的实现过程.本节将会对共享模式的同步状态获取和释放过程做一个解析.上一节提到了独占模式和共享模 ...

  8. 从.Net版本演变看String和StringBuild性能之争

    在C#中string关键字的映射实际上指向.NET基类System.String.System.String是一个功能非常强大且用途非常广泛的基类,所以我们在用C#string的时候实际就是在用.NE ...

  9. 导出CSV，导出excel数字过长显示科学计数法解决方案

    再导出CSV表格时发现数字超过一定长度后会缩写成科学计数法,对于手机号和身份证就比较尴尬了. 在网上找了一下,大部分都是加"'"将数字转换为字符串,但是纠结于导出的数字前面有个单引 ...

  10. Quartz.net 定时任务之Cron表达式

    一.cron表达式简单介绍和下载 1.在上一篇博客"Quartz.net 定时任务之简单任务"中,我简单介绍了quartz的使用,而这篇博客我将介绍cron的具体使用(不足之处望大 ...