FormData

概述

FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(key data),而独立于表单使用。如果表单enctype属性设为multipart/form-data ,则会使用表单的submit()方法来发送数据,从而,发送数据具有同样形式。key是唯一的,一个key可能对应多个value。如果是使用表单初始化,每一个表单字段对应一条数据,它们的HTML name属性即为key值,它们value属性对应value值。

 

构造函数

1.创建一个空对象实例

  var formData = new FormData();

此时可以调用append()方法来添加数据。

formData.append('user','username');
formData.get('user');  // 获取
formData.delete('user');  // 删除

2、使用已有的表单来初始化一个对象实例

<form id="myForm" action="" method="post">
    <input type="text" name="name">名字
    <input type="password" name="psw">密码
    <input type="submit" value="提交">
</form>

我们可以使用这个表单元素作为初始化参数,来实例化一个formData对象。

// 获取页面已有的一个form表单
var form = document.getElementById("myForm");
// 用表单来初始化
var formData = new FormData(form[0]);

因为new FormData需要的是一个HtmlElement类型的数据,而jquery拿到的是HtmlElement集合,所以哪怕只有一个元素,也要用[0]取其第一个元素。 

// 我们可以根据name来访问表单中的字段
var name = formData.get("name"); // 获取名字
var psw = formData.get("psw"); // 获取密码
// 当然也可以在此基础上,添加其他数据
formData.append("token","ccccccc");

 

获取

我们可以通过get(key)/getAll(key)来获取对应的value。

formData.get('name');  // 获取key为name的值

 

添加

我们可以通过append(key, value)来添加数据,如果指定的key不存在则会新增一条数据,如果key存在,则添加到数据的末尾。

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.get("k1"); // "v1"
formData.getAll("k1"); // ["v1","v2","v1"]

 

设置修改数据

我们可以通过set(key, value)来设置修改数据,如果指定的key不存在则会新增一条,如果存在,则会修改对应的value值。

formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]

 

判断是否有这数据

我们可以通过has(key)来判断是否有对应的key值。

formData.append("k1", "v1");
formData.append("k2",null);
formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false

 

通过delete(key),来删除数据

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1"); 
formData.getAll("k1"); // []

 

遍历

我们可以通过entries()来获取一个迭代器,然后遍历所有的数据。

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k2", "v1");
var i = formData.entries();
i.next(); // {done:false, value:["k1", "v1"]}
i.next(); // {done:fase, value:["k1", "v2"]}
i.next(); // {done:fase, value:["k2", "v1"]}
i.next(); // {done:true, value:undefined}

我们也可以通过values()方法只获取value值。

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k2", "v1"); 
var i = formData.entries();
i.next(); // {done:false, value:"v1"}
i.next(); // {done:fase, value:"v2"}
i.next(); // {done:fase, value:"v1"}
i.next(); // {done:true, value:undefined}

 

FormData+Ajax

对于包含图片、文件的表单做Ajax提交时,可以用FormData来封装数据,并提交到服务端。

<form id="addFeedbackForm" enctype='multipart/form-data'>
    <div class="form-group">
        作者:<span id="loginName" name="loginName"></span>
    </div>
    <div class="controls">
        <textarea id="describe" name="describe"></textarea>
    </div>
        <input id="f_upload" name="image" type="file" class="file" multiple />
    <div class="pull-left">
        <button type="button" id="submitButton" onclick="submit()" >提交</button>
    </div>
</form>
function submit(){
var formData = new FormData($("#form")[0]);
$.ajax({
        type:'post',
        url:'../../tmarket/updateUserInfo.action',
        data:formData,
        contentType: false,
        processData: false,
        success:function(){
            alert("修改成功");
        },
        error:function () {
            alert("修改失败!");
        }
        });
}

在Action中,可以通过request.getParameter("表单name属性值")方法来获取其中的数据。

如果是Struts2框架,还可以通过为标签的name值赋予" obj.name" 的形式,然后在Action中通过obj.getName()来获取。使用详情参考Struts2的表达式驱动。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mephisto180502

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值