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. docker 内时区和宿主机差8个小时，怎么办？
			
    docker run -d -it --name tt -e TZ=Asia/Shanghai -p : api 使用-e参数指定时区
    
			
    2. 
						
  2. linux文件系统的类型
			
    文件系统的类型 兄弟连介绍-Linux有四种基本文件系统类型:普通文件.目录文件.连接文件和特殊文件,可用file命令来识别. 普通文件:如文本文件.C语言元代码.SHELL脚本.二进制的可执行文件等 ...
    
			
    3. 
						
  3. (容量超大)or(容量及价值)超大背包问题 ( 折半枚举 || 改变 dp 意义 )
			
    题意 : 以下两个问题的物品都只能取有且只有一次 ① 给你 N 个物品,所有物品的价值总和不会超过 5000, 单个物品的价格就可达 10^10 ,背包容量为 B ② 给你 N (N ≤ 40 ) 个 ...
    
			
    4. 
						
  4. 动态GI
			
    在Engine/Config 目录中找到ConsoleVariables.ini并打开,在其中加入 r.LightPropagationVolume = 1 ,保存,重启引擎 如果场景中有Post P ...
    
			
    5. 
						
  5. mui初级入门教程（七）— 基于native.js的文件系统管理功能实现
			
    文章来源:小青年原创发布时间:2016-08-01关键词:mui,nativejs,android转载需标注本文原始地址: http://zhaomenghuan.github.io... 前言 这段 ...
    
			
    6. 
						
  6. Matlab中imfilter()函数的用法
			
    Matlab中imfilter()函数的用法 功能:对任意类型数组或多维图像进行滤波.用法:B = imfilter(A,H) B = imfilter(A,H,option1,option2,... ...
    
			
    7. 
						
  7. (转)JNI参数传递|Surface && sign签名对应
			
    http://blog.csdn.net/stefzeus/article/details/6622011 char* Get_Surface(JNIEnv *env, jclass cls, job ...
    
			
    8. 
						
  8. mvn 与 pom.xml
			
    mvn 安装 wget http://mirrors.hust.edu.cn/apache//maven/maven-3/3.0.5/binaries/apache-maven-3.0.5-bin.t ...
    
			
    9. 
						
  9. Python字典的json格式化处理（换行与不换行）
			
    Prefer = {"jim": {"War": 1.9, "the big bang": 1.0, "The lord of w ...
    
			
    10. 
						
  10. Vue实现音乐播放器（四）：页面入口+header组件的编写
			
    首先下载三个包 babel-runtime对es语法进行转义 fastclick解决移动端点击300毫秒延迟的问题 babel-polyfill对es6 api进行转义 下载了包之后要在main.js ...
    
			
    11.