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>
1
2
3
4
5
6
7

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

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

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

    // 快速获取表单的值（不用再.value了）
    var data = $(this).serialize()
    console.log(data)
  })
1
2
3
4
5
6
7
8
9
10

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))
   }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

==>

  <form id="form1">
   <input type="text" name="username" autocomplete="off">
   <br/>
   <input type="password" name="pwd" >
   <br/>
   <button type="submit">提交button>
  form>
1
2
3
4
5
6
7

// 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))
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

主要还是用来上传文件

上传文件

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

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

<input type="file" id="file1">

<button id="btnUpload">上传文件button>
<hr/>

<img src="" id="img" alt="">
1
2
3
4
5
6
7

// 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("图片上传失败")
        }
      }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

显示文件上传进度

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

引入bootstrap，并加进度条显示

JavaScript实现form表单的多文件上传

pdf 0星 超过10%的资源 42KB

下载

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

  <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 src="" id="img" alt="">
1
2
3
4
5
6
7
8

在创建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')
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

使用jQuery实现文件上传

1定义ui结构

 
  上传文件

  

  
1
2
3
4
5

2验证是否选择了文件

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

3：向FormData中追加文件

Form表单上传文件（type="file"）的使用

pdf 0星 超过10%的资源 35KB

下载

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

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)
      }
    })
1
2
3
4
5
6
7
8
9
10
11
12
13

5jQuery实现loading效果

1:ajaxStart(callback)

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

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

2：ajaxStop(callback)

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

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