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. Xcode 代码注释
			
    /** * 生成二维码 * * @param data 二维码数据 * @param size 二维码大小 * @param color 二维码颜色 * @param backgroundColor  ...
    
			
    2. 
						
  2. ARC模式下delloc()注意事项
			
    1.ARC模式下delloc()调用触发时机是对象被销毁,如self.属性=nil 2.ARC模式下delloc()里面不需要手动调用[super dealloc]; 因为系统已经自动调用,多此一举的 ...
    
			
    3. 
						
  3. SQL把a表字段数据存到b表字段 update,,insert
			
    update SYS_Navigation set SYS_Navigation.PARENT_XH = SYS_Power_menu.parent_id,SYS_Navigation.web_tit ...
    
			
    4. 
						
  4. JDK，JRE与JVM浅析
			
    JAVA的两个特性: 1, 开源-指的是源代码免费 2,跨平台(可移植性好) 跨平台:是指跨操作系统 JVM(java virtual machine,java虚拟机) JVM就像是两国谈判时的使者充 ...
    
			
    5. 
						
  5. HDU 6616 Divide the Stones
			
    目录 题面 中文题意 比赛惨状 我的走不通的思路 \(m\)是偶数的情况 \(m\)是奇数的情况 题解的思路 另一些思路 源代码 题面 Time limit 3000 ms Memory limit  ...
    
			
    6. 
						
  6. 手把手教你学Vue-3(路由)
			
    1.路由的作用 1.当我们有多个页面的时候 ,我们需要使用路由,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 简单的路由 const ro ...
    
			
    7. 
						
  7. Spring 使用RedisTemplate操作Redis
			
    首先添加依赖: <!-- https://mvnrepository.com/artifact/redis.clients/jedis --> <dependency> < ...
    
			
    8. 
						
  8. 字节对齐#pragma pack
			
    这是给编译器用的参数设置,有关结构体字节对齐方式设置, #pragma pack是指定数据在内存中的对齐方式. #pragma pack (n)             作用:C编译器将按照n个字节对 ...
    
			
    9. 
						
  9. MacOS下Java Mission Control无法正常启动
			
    参考JMC(Java Mission Control)在mac下无法启动和显示界面 附件下载地址备份(org.eclipse.swt.cocoa.macosx.x86_64-3.112.0.jar)  ...
    
			
    10. 
						
  10. Gitblit 添加密钥实现客户端无密码pull、push代码
			
    之前管理代码用的是SVN,项目需要将管理代码软件切换为Git 折腾了一天,记录下遇到的小坑,方便后来人. 服务端 服务端 的系统是Windows Sever2008 ,首先在服务端安装window版本 ...
    
			
    11.