JS FormData对象使用方法实例详解


Posted in Javascript onFebruary 12, 2020

本文实例讲述了JS FormData对象使用方法。分享给大家供大家参考,具体如下:

FormData的主要用途有两个:

1、将form表单元素的name与value进行组合,实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率。

2、异步上传文件

一、创建formData对象

1、创建一个空对象:

//通过FormData构造函数创建一个空对象
var formdata=new FormData();
//可以通过append()方法来追加数据
formdata.append("name","laotie");
//通过get方法对值进行读取
console.log(formdata.get("name"));//laotie
//通过set方法对值进行设置
formdata.set("name","laoliu");
console.log(formdata.get("name"));//laoliu

2、通过表单对formData进行初始化

创建表单:

<form id="advForm">
  <p>广告名称:<input type="text" name="advName" value="xixi"></p>
  <p>广告类别:<select name="advType">
    <option value="1">轮播图</option>
    <option value="2">轮播图底部广告</option>
    <option value="3">热门回收广告</option>
    <option value="4">优品精选广告</option>
  </select></p>
  <p><input type="button" id="btn" value="添加"></p>
</form>

通过表单元素作为参数,实现对formData的初始化:

//获得表单按钮元素
var btn=document.querySelector("#btn");
//为按钮添加点击事件
btn.onclick=function(){
  //根据ID获得页面当中的form表单元素
  var form=document.querySelector("#advForm");
  //将获得的表单元素作为参数,对formData进行初始化
  var formdata=new FormData(form);
  //通过get方法获得name为advName元素的value值
  console.log(formdata.get("advName"));//xixi
  //通过get方法获得name为advType元素的value值
  console.log(formdata.get("advType"));//1 
}

二、操作方法

1、通过get(key)与getAll(key)来获取相对应的值

// 获取key为age的第一个值
formdata.get("age"); 
 // 获取key为age的所有值,返回值为数组类型
formdata.getAll("age");

2、通过append(key,value)在数据末尾追加数据

//通过FormData构造函数创建一个空对象
var formdata=new FormData();
//通过append()方法在末尾追加key为name值为laoliu的数据
formdata.append("name","laoliu");
//通过append()方法在末尾追加key为name值为laoli的数据
formdata.append("name","laoli");
//通过append()方法在末尾追加key为name值为laotie的数据
formdata.append("name","laotie");
//通过get方法读取key为name的第一个值
console.log(formdata.get("name"));//laoliu
//通过getAll方法读取key为name的所有值
console.log(formdata.getAll("name"));//["laoliu", "laoli", "laotie"]

3、通过set(key, value)来设置修改数据

key的值不存在,会添加一条数据

//通过FormData构造函数创建一个空对象
var formdata=new FormData();
//如果key的值不存在会为数据添加一个key为name值为laoliu的数据
formdata.set("name","laoli");
//通过get方法读取key为name的第一个值
console.log(formdata.get("name"));//laoli
key的值存在,会修改对应的value值
//通过FormData构造函数创建一个空对象
var formdata=new FormData();
//通过append()方法在末尾追加key为name值为laoliu的数据
formdata.append("name","laoliu");
//通过append()方法在末尾追加key为name值为laoliu2的数据
formdata.append("name","laoliu2");
//通过get方法读取key为name的第一个值
console.log(formdata.get("name"));//laoliu
//通过getAll方法读取key为name的所有值
console.log(formdata.getAll("name"));//["laoliu", "laoliu2"]
//将存在的key为name的值修改为laoli
formdata.set("name","laoli");
//通过get方法读取key为name的第一个值
console.log(formdata.get("name"));//laoli
//通过getAll方法读取key为name的所有值
console.log(formdata.getAll("name"));//["laoli"]

4、通过has(key)来 判断是否存在对应的key值

//通过FormData构造函数创建一个空对象
var formdata=new FormData();
//通过append()方法在末尾追加key为name值为laoliu的数据
formdata.append("name","laoliu");
//判断是否包含key为name的数据
console.log(formdata.has("name"));//true
//判断是否包含key为age的数据
console.log(formdata.has("age"));//false

5、通过delete(key)可以删除数据

//通过FormData构造函数创建一个空对象
var formdata=new FormData();
//通过append()方法在末尾追加key为name值为laoliu的数据
formdata.append("name","laoliu");
console.log(formdata.get("name"));//laoliu
//删除key为name的值
formdata.delete("name");
console.log(formdata.get("name"));//null

三、通过XMLHttpRequest发送数据

创建表单:

<form id="advForm">
  <p>广告名称:<input type="text" name="advName" value="xixi"></p>
  <p>广告类别:<select name="advType">
    <option value="1">轮播图</option>
    <option value="2">轮播图底部广告</option>
    <option value="3">热门回收广告</option>
    <option value="4">优品精选广告</option>
  </select></p>
  <p>广告图片:<input type="file" name="advPic"></p>
  <p>广告地址:<input type="text" name="advUrl"></p>
  <p>广告排序:<input type="text" name="orderBy"></p>
  <p><input type="button" id="btn" value="添加"></p>
</form>

发送数据:

var btn=document.querySelector("#btn");
btn.onclick=function(){
  var formdata=new FormData(document.getElementById("advForm"));
  var xhr=new XMLHttpRequest();
  xhr.open("post","http://127.0.0.1/adv");
  xhr.send(formdata);
  xhr.onload=function(){
    if(xhr.status==200){
      //...
    }
  }
}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
使用jquery给input和textarea设定ie中的focus
May 29 Javascript
理解Javascript_09_Function与Object
Oct 16 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
Vue.js开发环境快速搭建教程
Mar 17 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
序列化模块json代码实例详解
Mar 03 Javascript
Vue实现简单的跑马灯
May 25 Javascript
uniapp与webview之间的相互传值的实现
Jun 29 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 #Javascript
微信小程序实现树莓派(raspberry pi)小车控制
Feb 12 #Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 #Javascript
使用webpack搭建pixi.js开发环境
Feb 12 #Javascript
十分钟教你上手ES2020新特性
Feb 12 #Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 #Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 #Javascript
You might like
PHP通用检测函数集合
2011/02/08 PHP
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
jQuery创建插件的代码分析
2011/04/14 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
js微信分享API
2020/10/11 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
JavaScript如何操作css
2020/10/24 Javascript
Python里disconnect UDP套接字的方法
2015/04/23 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
Python实现数值积分方式
2019/11/20 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
PHP如何自定义函数
2016/09/16 面试题
酒店总经理助理职责
2014/02/12 职场文书
招商银行工作证明
2015/06/17 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python
浅谈Python中对象是如何被调用的
2022/04/06 Python