FormData

最新推荐文章于 2022-11-28 11:30:18 发布

zihanzy.com

最新推荐文章于 2022-11-28 11:30:18 发布

阅读量1.2k

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/weixin_45143481/article/details/105178731

版权

javaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

FormData 接口提供了一种表示表单数据的键值对的构造方式，经过它的数据可以使用 XMLHttpRequest.send() 方法送出，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。

上面提到了Formdata提供一种表示表单数据得键值对的构造方式，什么意思?

通过Formdata你就不用手动拼接表单元素的值了如name:sdd&pwd:dsf…
或许你会疑惑我为什么要手动拼接表单值，直接提交不就行了吗？有些时候我们会通过ajax提交表单，通过ajax提交表单时我们不得不手动拼接表单值，数量少还好数量多很容易出错，写着也烦，此处笔者深有体会啊
而使用Formdata则可以很好的解决这个问题
传统XMLHttpRequest提交

window.onsubmit=function(){
		submit.onclick=function(){
			let xhr = new XMLHttpRequest();

			xhr.onreadystatechange=function(){
				if(xhr.readyState==4){
					if(xhr.status==200){
						console.log('请求成功')
					}else{
		 		        console.log('请求失败')
					}
				}
			}
			xhr.open('get','text.js?'+"name="+username.value+"&"+"age="+age.value+"&"+"phone="+phone.value+"&"+"email="+email.value+"&"+"address="+address.value+"&"+"comp="+comp.value)
			xhr.send(null);
		}
		return false;
	}

可以看到拼接数据那一块实在太麻烦了，或许我们可以将它转换为json但工作量也少不到哪儿去

使用Formdata发送数据

 let oform = document.getElementById('oform')//获取form元素
    window.onsubmit=function(){
    	let formdata = new FormData(oform)//通过表单构建FormData
    	let xhr = new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
        	    if(xhr.status==200){
        		    console.log('请求成功')
        	    }else{
        		    console.log('请求失败')
        	    }
         
            }
        }
    xhr.open(oform.method,oform.action  );
    xhr.send(formdata)
	
        return false;
    }

看上去代码似乎都差不多，但这里我们没有手动拼接数据，而是直接使用了表单元素的数据。

jQuery中使用FormData

 $('#form1').on('submit', function (){
    let formdata=new FormData(this);
    $.ajax({
      url: this.action,
      type: this.method,
      data: formdata,
      processData: false,
      contentType: false
    }).then(res=>{
      alert('成功');
    }, res=>{
      alert('失败');
    });

    return false;
  });

需要注意的是使用jq的ajax时必须设置process…和contentype…=false

FormData还有可用于文件上传，使用FormData执行文件上传我们不需要手动设置enctype=…它会自动帮我们处理

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form id="form1" action="http://localhost:8080/" method="post">
      用户：<input type="text" name="user" /><br>
      密码：<input type="password" name="pass" /><br>
      文件：<input type="file" name="f1" /><br>
      <input type="submit" value="提交">
    </form>
  </body>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

  <script>
  $('#form1').on('submit', function (){
    let formdata=new FormData(this);

    $.ajax({
      url: this.action,
      type: this.method,
      data: formdata,
      processData: false,
      contentType: false
    }).then(res=>{
      alert('成功');
    }, res=>{
      alert('失败');
    });

    return false;
  });
  </script>
</html>

FormData常用方法
formdata.get(key):获取表单name=key的值
formdata.append("name","value") 表单元素添加一个name=name,value='value’的值
formdata.set("name","value")修改key为name的值，如果key不存在则添加
formdata.has("name") 判断是否有key为name的值返回布尔值
formdata.delete("name")删除某个key值

zihanzy.com

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
FormData

FormData 接口提供了一种表示表单数据的键值对的构造方式，经过它的数据可以使用 XMLHttpRequest.send() 方法送出，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。上面提到了Formdata提供一种表示表单数据得键值对的构造方式，什么意思?通过Formdata你就不用手动拼接表单元素的值...
复制链接

扫一扫

专栏目录