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. 【rust】Rust 的构建系统和包管理工具Cargo认识并初步使用（2）
			
    Cargo 是 Rust 的构建系统和包管理工具,同时 Rustacean 们使用 Cargo 来管理它们的 Rust 项目.Cargo 负责三个工作:构建你的代码,下载你代码依赖的库并编译这些库.我 ...
    
			
    2. 
						
  2. Java称霸编程语言排行榜
			
    笔者精挑细选了本周研发频道的热门看点,供您在这个周末阅读欣赏.内容涵盖TIOBE编程语言8月份排行榜.开源挑战.WebGL演示.HTML5在线工具.IT职业身涯的14个建议,还有即将举行的SDCC(中 ...
    
			
    3. 
						
  3. 高级软件测试技术（测试管理工具实践day2）
			
    今天在紧张的学习之余,我们小组选定了bugzilla,并且打算在今天晚上刚进行下载安装. 在安装bugzilla需要的软件有MySQL数据库软件,activeperl软件,bugzilla安装包,II ...
    
			
    4. 
						
  4. iOS Beta 升级或降级
			
    https://sspai.com/post/45442 public beta网站上安装profile, 去手机看更新 developer beta, 登录开发者网站, downloads, 下载p ...
    
			
    5. 
						
  5. SQL Server函数大全(三)----Union与Union All的区别
			
    如果我们需要将两个select语句的结果作为一个整体显示出来,我们就需要用到union或者union all关键字.union(或称为联合)的作用是将多个结果合并在一起显示出来. union和unio ...
    
			
    6. 
						
  6. 【C++】fill函数，fill与memset函数的区别
			
    转载自:https://blog.csdn.net/liuchuo/article/details/52296646 memset函数 按照字节填充某字符在头文件<cstring>里面fi ...
    
			
    7. 
						
  7. 几种 MyBatis 增强插件
			
    1. mybatis-generator/mybatis-generator-gui 2. 通用mapper 3. mybatis-plus 4. fastmybatis 5. mybatis-enh ...
    
			
    8. 
						
  8. linux（centos6.5）常用命令
			
    前言:由于项目项目使用的是linux服务器,因此会使用到较多linux命令,本文对centos下常用命令进行记录 1.vi的三种模式 2.解压缩相关 3.用户相关 4.文件相关 5.各种查看命令 1. ...
    
			
    9. 
						
  9. ensorflow学习笔记四：mnist实例--用简单的神经网络来训练和测试
			
    http://www.cnblogs.com/denny402/p/5852983.html ensorflow学习笔记四:mnist实例--用简单的神经网络来训练和测试   刚开始学习tf时,我们从 ...
    
			
    10. 
						
  10. c# WPF——创建带有图标的TreeView
			
    1.使用数据模板对TreeViewItem进行更改 2.xaml中重写TreeviewItem的控件模板 3.继承TreeViewItem(TreeView中的元素),后台进行控件重写.(介绍此方法) ...
    
			
    11.