axios及jQuery各种方式提交数据

 1. application/json基本get和post请求

//get请求

export function getPhoneCode(data) {
  // {phone: 手机号,pictureCode: 1111}
  //同axios#delete,axios#head,axios#options
  return axios.get('/api/url', {
    params: data,
    headers: { 'X-Requested-With': 'XMLHttpRequest' }
  });
}

export function getToken(params) {
  return axios({
    method: 'get',
    url: '/api/url',
    params,
    headers: { 'X-Requested-With': 'XMLHttpRequest' }
  });
}


//post请求

export function bindUser(data) {
  //同axios#put,axios#patch
  return axios.post('/api/url', data, {
    headers: { 'X-Requested-With': 'XMLHttpRequest' }
  });
}

export function getList(data) {
  return axios({
    method: 'POST',
    url: '/api/url',
    data,
    headers: { 'X-Requested-With': 'XMLHttpRequest' }
  });
}



//jquery

$.ajax({
  url: './11.php',
  type: 'post', // get
  processData: false,
  contentType: 'application/json; charset=utf-8',
  data: JSON.stringify({
    aa: 11,
    bb: 2
  })
});

2. application/x-www-form-urlencoded请求(仅支持post)

export function login(data) {
  return axios.post(
    '/api/url',
    qs.stringify(data),
    {
      headers: {
        'content-type': 'application/x-www-form-urlencoded'
      }
    }
  );
}



$.ajax({
  url: './11.php',
  type: 'post', // get
  data: {
    aa: 11,
    bb: 2
  }
});

3. multipart/form-data请求(仅支持post)

export function upload(data) {
  data = data || {};
  let submitData;
  const formData = new FormData();
  if (formData.realFormData) {
    // 兼容ios,并注意axios版本要在1.3.1,ios钉钉会有realFormData属性
    submitData = data;
  } else {
    Object.keys(data).forEach(v => {
      formData.append(v, data[v]);
    });
    submitData = formData;
  }
  console.info(111, data, formData, submitData);

  return axios({
    url: '/api/upload',
    method: 'post',
    headers: {
      Authorization: 'sdfasfsfwrfrwerrrrrrrrrrrfbdddddddddddddd',
      'Content-Type': 'multipart/form-data'
    },
    onUploadProgress(progressEvent) {
      // 原生获取上传进度的事件
      if (progressEvent.lengthComputable) {
        // 属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
        // 如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
      }
    },
    data: submitData
  });
}


export function upload(data) {
  data = data || {};
  const formData = new FormData();
  Object.keys(data).forEach(v => {
    formData.append(v, data[v]);
  });
  $.ajax({
    url: '/api/upload',
    type: 'post',
    dataType: 'text',
    processData: false,
    contentType: false,
    data: formData,
    xhr() {
      let xhr = new XMLHttpRequest();
      // 使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
      xhr.upload.addEventListener('progress', function(e) {
        // IE10+
        // loaded代表上传了多少
        // total代表总数为多少
        let progressRate = (e.loaded / e.total) * 100 + '%';
        console.log(e, '上传', progressRate);
      });

      // 下载
      xhr.addEventListener('progress', function(e) {
        // IE10+
        // loaded代表上传了多少
        // total代表总数为多少
        let progressRate = (e.loaded / e.total) * 100 + '%';
        console.log(e, '下载', progressRate);
      });

      return xhr;
    },
    success() {
      console.log(1111);
    }
  });
}