form表单

1. action属性：提交表单时，向何处发送表单数据
2. target属性：在何处打开url

• _blank 在新窗口打开
• _self 在同一个窗口打开 默认
• _parent
• _top

3. method属性： 以何种方式把表单数据提交到 action url GET/POST

4. enctype属性： 发送表单数据之前如何对数据进行编码——主要用于上传图片（post请求）

• application/x-www-form-urlencoded 在发送前编码所有字符（默认）
• multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值
• text/plain 空格转换为 “+” 加号，但不对特殊字符编码。（很少用）

  <form action="/login" method="get">
    <input type="text" name="email" id="">
    <br/>
    <input type="password" name="pass">
    <br/>
    <input type="submit" value="提交">
  </form>

form 只是用来获取数据 ajax发送请求
监听表单的提交事件：

  第一种
  $('#f1').submit(function(){
    
    alert('监听到表单的提交事件')
  })

  第二种
$('#f1').on('submit',function(e){
    
    alert('监听到表单的提交事件')
    // 阻止默认行为（默认提交）
    e.preventDefault()

    // 快速获取表单的值（不用再.value了）
    var data = $(this).serialize()
    console.log(data)
  })

FormData对象

为了方便表单处理，HTML5新增了一个FormData对象，可以模拟表单操作

// 1创建FormData对象
var fd = new FormData()
// 2 调用append函数,向fd中追加数据
fd.append('username','zs');
fd.append('pwd',"12345");

 var xhr = new XMLHttpRequest()
 xhr.open('POST','http://www.liulongbin.top:3006/api/formdata');
 xhr.send(fd)

 xhr.onreadystatechange = function(){
    
   if(xhr.readyState === 4 && xhr.status ===200){
    
     console.log(JSON.parse(xhr.responseText))
   }
 }

==>

  <form id="form1">
   <input type="text" name="username" autocomplete="off">
   <br/>
   <input type="password" name="pwd" >
   <br/>
   <button type="submit">提交</button>
  </form>

// 1 dom操作获取form表单元素
var form = document.querySelector("#form1");

form.addEventListener('submit',function(e){
    
  // 阻止表单的默认行为
  e.preventDefault();

  // 创建FormData 快速获取到form表单中的数据
  var fd = new FormData(form);

  var xhr = new XMLHttpRequest()
  xhr.open('POST','http://www.liulongbin.top:3006/api/formdata');
  xhr.send(fd)

  xhr.onreadystatechange = function(){
    
    if(xhr.readyState === 4 && xhr.status ===200){
    
      console.log(JSON.parse(xhr.responseText))
    }
  }
})

主要还是用来上传文件

上传文件

XMLHttpRequest对象，不仅可以发送文本信息，还可以上传文件

  1:定义ui结构
  2：验证是否选择了文件
  3：向FormData中追加文件
  4：使用xhr发起上传文件的请求
  5：监听onreadystatechange事件

<!-- 1文本选择器 -->
<input type="file" id="file1">
<!-- 2上传文件按钮 -->
<button id="btnUpload">上传文件</button>
<hr/>
<!-- img显示上传成功后的图片 -->
<img src="" id="img" alt="">

// 1获取文件上传按钮
var btn = document.querySelector("#btnUpload");

// 绑定事件
btn.addEventListener('click',function(){
    
    // 3获取用户选择的文件列表
    var files = document.querySelector("#file1").files;
    console.log(files,0)
    // 验证是否选择了文件
    if(files.length <= 0){
    
      return alert("请选择要上传的文件");
    }

    var fd = new FormData();
    // 将用户选择的文件添加到FormData中
    fd.append('avatar',files[0]);


    var xhr = new XMLHttpRequest()
    xhr.open('POST','http://www.liulongbin.top:3006/api/upload/avatar');
    xhr.send(fd)

    xhr.onreadystatechange = function(){
    
      if(xhr.readyState === 4 && xhr.status ===200){
    
        // console.log(JSON.parse(xhr.responseText))
        var data = JSON.parse(xhr.responseText);
        if(data.status===200){
    
         document.querySelector('#img').src ='http://www.liulongbin.top:3006' + data.url
        }else{
    
          alert("图片上传失败")
        }
      }
    }
})

显示文件上传进度

XMLHttpRequest对象可以通过监听xhr.upload.onprogress事件，来获取文件的上传进度

引入bootstrap，并加进度条显示

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- bootstrap进度条 -->
  <div class="progress" style="width: 500px; margin: 15px 10px;">
    <div class="progress-bar progress-bar-striped active" id="percent" style="width: 0%;">
      0%
    </div>
  </div>
  <!-- img显示上传成功后的图片 -->
  <img src="" id="img" alt="">

在创建XML对象之后

var xhr = new XMLHttpRequest();

// 监听文件上传的进度
xhr.upload.onprogress = function(e){
    
  // console.log(1)
  if(e.lengthComputable){
    
    // 计算上传的进度 计算当前上传进度的百分比
    var procentComplete = Math.ceil((e.loaded / e.total)*100);
    // console.log(procentComplete)
    // 动态设置进度条

    $("#percent").attr('style','width:' + procentComplete + '%;').html(procentComplete + '%')
  }
}

// 监听上传完成的事件
xhr.upload.onload = function(){
    
  $("#percent").removeClass().addClass('progress-bar progress-bar-success')
}

使用jQuery实现文件上传

1定义ui结构

 <input type="file"  id="file1">
  <button id="btn">上传文件</button>

  <br/>
  <img src="./loading.gif" style="display: none;" id="loading" alt="">

2验证是否选择了文件

var files = $("#file1")[0].files;
    if(files.length <= 0){
      return alert("请选择文件后再上传");
    }

3：向FormData中追加文件

// 追加到formdata中
    var fd= new FormData();
    fd.append('avatar',files[0])

4：使用jquery发起上传文件得请求

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

5jQuery实现loading效果

1:ajaxStart(callback)

ajax请求开始时，执行ajaxStart，可以在它的callback中显示loading效果

  // 监听ajax请求被发起了   会监听当前页面中所有的ajax请求
$(document).ajaxStart(function(){
    $("#loading").show()
})

2：ajaxStop(callback)

ajax请求结束时，执行ajaxStop函数，可以在callback中隐藏loading效果

$(document).ajaxStop(function(){
  $("#loading").hide()
})