Jquery Ajax简单封装(集中错误、请求loading处理)

对Jquery Ajax做了简单封装，错误处理，请求loading等，运用到项目中集中处理会很方便。

技术层面没有什么好说的，请求是用jquery ajax，弹出层是用layer，大家可以随意替换。比如你用weui，也可以$.toast()等。
用jquery的Deferred来传递成功或失败的状态。

/*

*封装一个自己的ajax函数

*有5个参数，最后一个参数可选

*

* @param method(必选)    请求类型  get 和 post

* @param url(必选)       请求的url地址   相同域名下的页面（此函数不支持跨域请求）

* @param data(必选)      请求协带的数据  以js对象的形式定义，如：{name:'张三'}

* @param callback(必选)  回调函数,可接收一个参数，这个参数就是服务器响应的数据

* @param type(可选)      指定服务器响应的数据类型（可选值：json,xml,text），如果是json模式，则使用json解析数据，默认为text普通字符串

*/

//在一个js文件中引入另一个js文件

var new_element = document.createElement("script");

new_element.setAttribute("type", "text/javascript");

new_element.setAttribute("src", "https:////layui.hcwl520.com.cn/layui/layui.js?v=201811010202");

document.body.appendChild(new_element);

// js中引入一个css文件

var css = document.createElement('link');

css.rel = 'stylesheet';

css.href = 'https://layui.hcwl520.com.cn/layui/css/layui.css?v=201811010202';

document.head.appendChild(css);

function myAjax(method, url, data, callback, type) {

    var baseUrl = "xxxxx";

    url = baseUrl + url

    // 登录信息

    var login = sessionStorage.getItem("LoginUser");

    if (login != null) {

        var loginList = JSON.parse(sessionStorage.getItem("LoginUser"))

        // 用户token

        var token = loginList.token_sc

    }

    //创建兼容 XMLHttpRequest 对象

    var xhr;

    if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari

        xhr = new XMLHttpRequest();

    } else {// code for IE6, IE5

        xhr = new ActiveXObject("Microsoft.XMLHTTP");

    }

    //给请求添加状态变化事件处理函数

    xhr.onreadystatechange = function () {

        //判断状态码

        if (xhr.status == 200 && xhr.readyState == 4) {

            //根据type参数，判断返回的内容需要进行怎样的处理

            if (type == 'json') {

                //获得 json 形式的响应数据，并使用parse方法解析

                var res = JSON.parse(xhr.responseText);

            } else if (type == 'xml') {

                //获得 XML 形式的响应数据

                var res = responseXML;

            } else if (type == 'str') {

                //获得字符串形式的响应数据

                var res = xhr.responseText;

            } else {

                //获得 json 形式的响应数据，并使用parse方法解析

                var res = JSON.parse(xhr.responseText);

            }

            //调用回调函数,并将响应数据传入回调函数

            callback(res);

            var xhrObj = JSON.parse(xhr.response)

            // console.log(xhrObj.error_code)

            // 回调状态码，根据具体情况来，可以做一些集中loading处理之类的

            layui.use('layer', function () {

                //loading层

                var loading = layer.load(2, {

                    shade: [0.1, '#fff'], //0.1透明度的白色背景

                });

                if (xhrObj.error_code === 2011) {

                    layer.close(loading);

                    layer.msg(xhrObj.message, {

                        icon: 5

                    });

                } else if (xhrObj.error_code === 1100) {

                    layer.close(loading);

                    layer.msg(xhrObj.message, {

                        icon: 5

                    });

                } else if (xhrObj.error_code === 0) {

                    layer.close(loading);

                }

            });

        }

    };

    //判断data是否有数据

    var param = '';

    //这里使用stringify方法将js对象格式化为json字符串

    if (JSON.stringify(data) != '{}') {

        url += '?';

        for (var i in data) {

            param += i + '=' + data[i] + '&';   //将js对象重组，拼接成url参数存入param变量中

        }

        //使用slice函数提取一部分字符串，这里主要是为了去除拼接的最后一个&字符

        //slice函数：返回一个新的字符串。包括字符串从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。

        param = param.slice(0, param.length - 1);

    }

    //判断method是否为get

    if (method == "get") {

        //是则将数据拼接在url后面

        url = url + param;

    }

    //初始化请求

    xhr.open(method, url, true);

    //如果method == post

    if (method == "post") {

        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        //发送请求

        xhr.send(param);

    } else {

        //发送请求

        xhr.send(null);

    }

}
调用实例（引入上面代码）：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div>

        <input type="text" placeholder="手机号" id="phone">

        <input type="password" placeholder="密码" id="pass">

        <button onclick="login()">登录</button>

    </div>

    <script src="./lib/js/jquery-3.4.0.min.js"></script>

    <script src="./config/api.js"></script>

    <script>

        function login() {

            var phone = $('#phone').val()

            var pass = $('#pass').val()

            console.log("登录中..." + "手机号：" + phone)

            console.log("登录中..." + "密码：" + pass)

            myAjax('post', '/members/login', { phone: phone, pass: pass }, function (res) {

                console.log(res);

            });

        }

    </script>

</body>

</html>
												


											
Jquery Ajax简单封装(集中错误、请求loading处理)的更多相关文章
	

    
								
  1. JQuery - Ajax和Tomcat跨域请求问题解决方法！
		
    在JQuery里面使用Ajax和Tomcat服务器之间进行数据交互,遇到了跨域请求问题,无法成功得到想要的数据! 错误信息部分截图: 通过错误信息判断知道已经发生在Ajax跨域请求问题了! 当前Tom ...
    
		
    2. 
						
  2. Jquery.ajax 详细解释 通过Http请求加载远程数据
		
    首先请看一个Jquery.ajax的例子 $.ajax({ type: "GET", url: "/api/SearchApi/GetResults", dat ...
    
		
    3. 
						
  3. jQuery ajax的jsonp跨域请求
		
    一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解.(利用jQuery的jsonp) jQuery使用JSONP跨域 JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法 ...
    
		
    4. 
						
  4. jQuery Ajax 简单的实现跨域请求
		
    html 代码清单: <script type="text/javascript" src="http://www.youxiaju.com/js/jquery-1 ...
    
		
    5. 
						
  5. ajax简单封装
		
    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); ...
    
		
    6. 
						
  6. php+JQuery+Ajax简单实现页面异步刷新 （转）
		
    页面显示如下: JQueryAjax.html中的代码如下(用的较为简单的$.post) <html> <head> <meta charset="UTF-8& ...
    
		
    7. 
						
  7. jquery ajax中error返回错误解决办法
		
    转自:https://www.jb51.net/article/72198.htm 进入百度搜索此问题,发现有人这么说了一句 Jquery中的Ajax的async默认是true(异步请求),如果想一个 ...
    
		
    8. 
						
  8. C# .net  Jquery ajax 简单示例
		
    jquery中ajax相信大家都不陌生,这里只写个简单例子示意用法,详细后续再写. 在html中按钮事件中添加如下js var param = "data=" + escape($ ...
    
		
    9. 
						
  9. jquery ajax简单书写
		
    占时无法显示该内容,请稍后再试 $.ajax({ url:"http://v.juhe.cn/weather/index", data:{cityname:"苏州&quo ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Bugku web web2
			
    web2 打开后发现是个大滑稽啊!F12检查元素拿到flag
    
			
    2. 
						
  2. 大数据笔记（十七）——Pig的安装及环境配置、数据模型
			
    一.Pig简介和Pig的安装配置 1.最早是由Yahoo开发,后来给了Apache 2.支持语言:PigLatin 类似SQL 3.翻译器 PigLatin ---> MapReduce(Spa ...
    
			
    3. 
						
  3. 前端每日实战：138# 视频演示如何用纯 CSS 创作一张 iPhone 价格信息图
			
    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OorLGZ 可交互视频 此视频是可 ...
    
			
    4. 
						
  4. pl/sql的安装使用详解
			
    一.  先安装  orcale10.1客户端 setup右键属性,按下图设置 net  manager 设置,不设置 pl/sql developer没办法连接 二.再安装 pl/sql develo ...
    
			
    5. 
						
  5. mysql_Qcahce
			
    .cpu mem disk 如果是固态硬盘ssd那就是高速公路 火箭 高铁 普通公路 mysql 配置文件:windows 下 mysql.ini linux:my.cnf lamp路径:/opt/l ...
    
			
    6. 
						
  6. UI自动化之特殊处理四（获取元素属性\爬取页面源码\常用断言）
			
    获取元素属性\爬取页面源码\常用断言,最终目的都是为了验证我们实际结果是否等于预期结果 目录 1.获取元素属性 2.爬取页面源码 3.常用断言 1.获取元素属性 获取title:driver.titl ...
    
			
    7. 
						
  7. sql时间类型相关
			
    1.现在时间 NOW() 示例: select * from users where date<now() 2.时间相减 INTERVAL ' DAY 示例: ' DAY 3.timestamp ...
    
			
    8. 
						
  8. SSM Maven    MallDemo项目为例
			
    一.创建maven项目 项目结构 创建一个空项目 1. mall (**pom**) 父模块,用于放置公共属性.依赖关系等. 2. mall-util (**jar**) 工具模块,用于放置常用工具类 ...
    
			
    9. 
						
  9. 关于jdbc和数据库连接池的关系(不是封装的关系)
			
    你都说是数据库连接池了.那就是连接数据库用的.JDBC是java封装的对数据库的操作.当然你可以自己进一步封装.数据库连接池是JDBC使用的前提,如果连数据库连接池都没连上,JDBC的操作就谈不上了. ...
    
			
    10. 
						
  10. IIS下如何配置免费的https
			
    1.首先我们要取走我们的证书,保存在我们本地的电脑里,然后复制到服务器即可. 2.取走后接下来干嘛?当然是打开文件看看里面有些什么啊.我们找到IIS那个压缩包并解压. 3.解析得到pfx文件,也就是我 ...
    
			
    11.