JS FormData对象使用方法实例详解
作者:张培跃 发布时间:2024-02-25 04:54:46
标签:JS,FormData对象
本文实例讲述了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){
//...
}
}
}
希望本文所述对大家JavaScript程序设计有所帮助。
来源:https://www.jianshu.com/p/e984c3619019
0
投稿
猜你喜欢
- (1)Flush的内容至少要有256字节经过反复的测试,我得出一个结论。就是flush的内容至少要有256字节。也就是只有编译产生了至少25
- 一、发送消息import smtplibfrom email.mime.text import MIMETextfrom email.hea
- 字典树(Trie)可以保存一些字符串->值的对应关系。基本上,它跟 Java 的 HashMap 功能相同,都是 key-value
- 目的:设计一个应用GUI用于对比两个Excel文件思路1.参数同一个excel文件两个sheet页其中一个ODS(老数据),一个DWH(新数
- 1.Python是如何进行内存管理的?答:从三个方面来说,一对象的引用计数机制,二垃圾回收机制,三内存池机制一、对象的引用计数机制Pytho
- TIMESTAMP类型返回日期时间数据中带有 T场景描述MySQL 中使用 TIMESTAMP 类型实体类使用 java.util.Date
- 创建py文件总是为txt格式问题记录写代码过程中创建.py文件时,一直正常,但创建名称为train.py文件时总是为txt格式,即使选择了p
- MySQL支持大量的列类型,它可以被分为3类:数字类型、日期和时间类型以及字符串(字符)类型。本节首先给出可用类型的一个概述,并且总结每个列
- 有时候需要对有角度的矩形框内图像从原图片中分割出来。这里的程序思想是,先将图片进行矩形角度的旋转,使有角度的矩形处于水平状态后,根据原来坐标
- 前言此次的目标是爬取指定城市的天气预报信息,然后再用Python发送邮件到指定的邮箱。下面话不多说了,来一起看看详细的实现过程吧一、爬取天气
- 在学习Python正则式的过程中,有一个问题一直困扰我,如何去匹配一个反斜杠(即“\”)?一、引入在学习了Python特殊字符和原始字符串之
- 本文实例讲述了Python实现的排列组合计算操作。分享给大家供大家参考,具体如下:1. 调用 scipy 计算排列组合的具体数值>&g
- fileinput模块提供处理一个或多个文本文件的功能,可以通过使用for循环来读取一个或多个文本文件的所有行。它的工作方式和readlin
- 首先要下载:Graphviz - Graph Visualization Software安装完成后将安装目录的bin 路径加到系统路径中,
- 一、获取文件路径实现1.1 获取当前文件路径import oscurrent_file_path = __file__print(f&quo
- 我就废话不多说啦,还是直接看代码吧!try: print(a)except Exception as e: prin
- 本文实例讲述了python判断字符串是否包含子字符串的方法。分享给大家供大家参考。具体如下:python的string对象没有contain
- 怀旧滤镜实现原理不管是荣耀华为手机还是其他的手机,我们都可以找到相机中的怀旧效果,这是手机中常用的一种滤镜效果。怀旧风格的设计主要是在图像的
- 这篇文章主要介绍了python通过移动端访问查看电脑界面,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的
- 目录最终呈现效果小米 “新” logo背后的数学Python绘制新logo流程获取资源最终呈现效果哈哈,咋们在讲述之前,首先看看最终呈现的效