jQuery高级用法

1.定义UI结构

 

 

$(function () {
    $('#btnUpload').on('click', function () {
      var files = $('#file1')[0].files
      if (files.length <= 0) {
        return alert('请选择文件后再上传!')
      }

      var fd = new FormData()
      fd.append('avatar', files[0])

      //发起 jQuery 的Ajax 请求、上传文件
      $.ajax({
        //上传文件 只能发post请求
        method: 'POST',
        url: 'http://www.liulongbin.top:3006/api/upload/avatar',
        data: fd,
        //不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
        processData: false,
        //不修改 Content-Type 属性,使用 FormData 默认的 Content-Type值
        contentType: false,
        success: function (res) {
          console.log(res);
        }
      })
    })
  })

 

jQuery实现loading效果

1.ajaxStart(callback)

Ajax请求开始时、执行ajaxStart 函数。可以在ajaxStart的 callback 中显示loading 效果、示例代码如下:

 

 注意:$(document).ajaxStart()函数会监听当前文档内所有的 Ajax 请求

 

2.ajaxStop(callback)

Ajax请求结束时、执行 ajaxStop 函数。可以在ajaxStop 的 callback 中隐藏loading 效果、示例代码如下: