基于jquery的ajax请求封装get，post 方法

Jquery在异步提交方面封装的很好，直接用AJAX非常麻烦，Jquery大大简化了我们的操作，不用考虑浏览器的诧异了，$.post、$.get是一些简单的方法，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()

一、$.ajax的一般格式

$.ajax({
     type: 'POST',
     url: 'url' ,
    data: 'data' ,
    success: 'success' ,
    dataType: 'dataType'
});

二、$.ajax的参数描述

url	必需。规定把请求发送到哪个 URL。
data	可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)	可选。请求成功时执行的回调函数。
dataType	可选。规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）。

三、$.ajax需要注意的一些地方： 1.data主要方式有三种，html拼接的，json数组，form表单经serialize()序列化的；通过dataType指定，不指定智能判断。

2.$.ajax只提交form以文本方式，如果异步提交包含<file>上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit

封装方法一

function ajax(obj){
            // 默认参数
            var defaults = {
                type : 'get',
                data : {},
                url : '#',
                dataType : 'text',
                async : true,
                success : function(data){console.log(data)}
            }
            // 处理形参，传递参数的时候就覆盖默认参数，不传递就使用默认参数
            for(var key in obj){//把输入的参数与设置的默认数据进行覆盖更新
                defaults[key] = obj[key];
            }
            // 1、创建XMLHttpRequest对象
            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject('Microsoft.XMLHTTP');// 兼容ie的早期版本
            }
            // 把对象形式的参数转化为字符串形式的参数
            /* {username:'zhangsan','password':123} 转换为 username=zhangsan&password=123 */
            var param = '';
            for(var attr in obj.data){
                param += attr + '=' + obj.data[attr] + '&';
            }
            if(param){//substring(start, end)截取字符串去掉最后的&符号
                param = param.substring(0,param.length - 1);
            }
            // 处理get请求参数并且处理中文乱码问题
            if(defaults.type == 'get'){
                defaults.url += '?' + encodeURI(param);
            }
            // 2、准备发送（设置发送的参数）
            xhr.open(defaults.type,defaults.url,defaults.async); // 处理post请求参数并且设置请求头信息（必须设置）
            var data = null;
            if(defaults.type == 'post'){
                data = param;
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //post模式下必须加的请求头，这个请求头是告诉服务器怎么去解析请求的正文部分。
            }
            // 3、执行发送动作
            xhr.send(data);
            // 处理同步请求，不会调用回调函数
            if(!defaults.async){
                if(defaults.dataType == 'json'){
                    return JSON.parse(xhr.responseText);
                }else{
                    return xhr.responseText;
                }
            }
            // 4、指定回调函数（处理服务器响应数据）
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    //4 获取数据成功
                if(xhr.status == 200){
                    //200 获取的数据格式正确
                    var data = xhr.responseText;
                    if(defaults.dataType == 'json'){
                        // data = eval("("+ data +")");
                        data = JSON.parse(data);
                        //JSON.parse把获取带的json格式的数据转化为js的对象形式可以使用
                        }
                        defaults.success(data);//回调函数
                    }
                }
            }
        }

var obj={ type:'get',data:{},url:'/api/login',dataType:'json' }

调用方法：ajax(obj)

封装方法二

新建utils下的request.js

// 请求得封装头部
var commomUrl = "https://www.tianqiapi.com"; // 公共前缀url
var commonHeader = { // 公共header
 	"Accept": "application/json",
 	"Authorization": "Bear " + "..."
 }
 
 //公共ajax封装
 function ajax(url, type, params, successfn, errorfn) {
 	$.ajax({
 		url: commomUrl + url,
 		type: type,
 		// headers: commonHeader,
 		data: params,
 		success: function(res) {
			successfn(res)
 		},
 		error: function(res) {
 			errorfn(res);
 		},
 		complete: function() {
 			// console.log('结束 看需要写不写');
 		}
 	});
 }

调用方法：

<script src="../assets/utils/request.js"></script> 
function scan() {
    let url = "/api/list", // 接口    
    params = { // 参数
        version: "v1",
        appid: "",//这里的接口参数自己注册就有
        appsecret: "",这里的接口参数自己注册就有
    };
    var pro = $('#ssidSelect');
    // 调用公共resquest.js的get方法
    ajax(url, "GET", params, function(res) {
        console.log(res); //请求成功
        let data = res.data;
        //添加桥接SSID到select
        for (let item of data) {
            let options = "";
            options += `<option value="${item.day}" >${item.day}</option>`;
            pro.append(options);
        }
        }, function(res) {
            console.log(res); //请求失败
    })
}