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. Java的基本使用
			
    1.如何运行一个Java源码 打开文本编辑器,输入以下代码: public class Hello { public static void main(String[] args) { System. ...
    
			
    2. 
						
  2. Element ui 中的表单提交按钮多次点击bug修复
			
    
			
    3. 
						
  3. Java如何进行Base64的编码(Encode)与解码(Decode)
			
    关于base64编码Encode和Decode编码的几种方式 Base64是一种能将任意Binary资料用64种字元组合成字串的方法,而这个Binary资料和字串资料彼此之间是可以互相转换的,十分方便 ...
    
			
    4. 
						
  4. @ResponseBody返回4种数据格式的数据
			
    1.返回一个键值对或者集合 前端JS请求: //返回值为map的形式 $(".name").blur(function(){ $.ajax({ type:"Post&qu ...
    
			
    5. 
						
  5. linux 文件相关常用命令
			
    文件或者目录操控命令 1,cd切换目录. 其中- 代表前一个目录 2,mkdir 新建目录. 加上-p参数可以递归创建多级目录 mkdir -p test1/test2/test3 3,rmdir删除 ...
    
			
    6. 
						
  6. yield(放弃、谦逊、礼让) - 瞬时的，暂时放了马上再抢
			
    两个线程抢占CPU各自执行任务,代码如下: public class Demo03 { public static void main(String[] args) throws Interrupte ...
    
			
    7. 
						
  7. 在阿里云centOS7上部署Redis 5.0.5主从 + 哨兵模式
			
    一.在两台服务器上分别安装.配置Redis 5.0.5 ,为一主一从 安装Redis关键命令: 将安装包上传至:/home 目录下解 压:.tar.gz 安装依赖:yum install gcc 安装 ...
    
			
    8. 
						
  8. uni-app学习资料整理-1.白话uni-app
			
    白话uni-app  https://ask.dcloud.net.cn/article/35657 文件内代码架构的变化 以前一个html大节点,里面有script和style节点: 现在templ ...
    
			
    9. 
						
  9. Oracle数据备份与恢复
			
    为了保证数据库的高可用性,Oracle数据库提供了备份和恢复机制,以便在数据库发生故障时完成对数据库的恢复操作,避免损失重要的数据资源 丢失数据分为:物理丢失:操作系统的数据库主键(数据文件.控机文件 ...
    
			
    10. 
						
  10. Golang闭包的坑
			
    team leader 发现一个Golang程序的bug,是由不正确使用闭包引起.记载一下,以作备忘. 猜猜一下程序的结果: import ( "fmt" "time&q ...
    
			
    11.