H5 FormData 表单数据对象详解 与 Json 对象相互转换

目录

FormData 表单对象概述

FormData 表单常用方法

添加、获取数据

修改、删除数据

判断是否含有指定 key

entries 遍历数据

forEach 循环取值

Json 与 FromData 相互转换

前后台 formData 数据传输示例

---

FormData 表单对象概述

1、FormData 是 Html5 新加进来的一个类,可以模拟表单数据

2、利用 FormData 对象，可以通过JavaScript键值对来模拟一系列表单控件，可以使用 JQuery 的 $.Ajax 结合 FormData 异步上传二进制文件

3、可以先通过 new 关键字创建一个空的 FormData 对象，然后使用 append() 方法向该对象里添加字段（字段的值可以是一个 File对象或者字符串，剩下其他类型的值都会被自动转换成字符串)，也可以 new 的同时直接传入表单对象，从而创建有值的FormData对象。

构造函数	解释
FormData (optional HTMLFormElement form)	(可选) 一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框.

    
    
    

    


刷新

    姓名：
    年龄：
    描述：请输入描述...

FormData 表单常用方法

添加、获取数据

1、添加数据：通过append(key, value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾

void append(DOMString name, DOMString value)
name 表单元素名称，已经存在时，以数组形式追加值
value 表单元素要传递的值

2、获取数据：可以通过 get(key)、getAll(key) 来获取对应的 value

    
    
    

    


刷新

修改、删除数据

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

    
    
    

    


刷新

2、删除数据：通过 delete(key)，来删除数据

    
    
    

    


刷新

判断是否含有指定 key

1、可以通过 has(key) 来判断是否对应的 key 值

    
    
    

    


刷新

entries 遍历数据

1、可以通过 entries() 来获取一个迭代器，然后遍历所有的数据，迭代器规则：

1）每调用一次 next() 返回一条数据对象，数据的顺序与添加的顺序一致
2）返回的数据对象，当其done属性为true时，说明已经遍历完所有的数据，value 值为 undefined
3）返回的数据对象的value属性以数组形式存储了一对key/value，数组下标0为key，下标1为value，如果一个key对应多个value，则会多对key/value返回

forEach 循环取值

Json 与 FromData 相互转换

前后台 formData 数据传输示例

1、FormData 实际就是一个表单对象，所以可以用来直接封装表单数据，前台页面如下：

2、后台代码

/** 测试使用，请删除
 * 后台接收和平时没有任何区别，可以单个命名接收，或者POJO对象直接自动封装接收
 * 下面是SpringMVC的接收方式，参数名必须与前台表单的name属性一致
 * @param name
 * @param age
 * @param sex
 * @param response
 */
@RequestMapping("test.action")
public void test(String name,String age,String sex, HttpServletResponse response) {
    try {
        response.setContentType("text/json;charset=UTF-8");
        PrintWriter printWriter = response.getWriter();
        JsonObject jsonObject = new JsonObject();

        System.out.println(name+":"+age+"::"+sex);

        printWriter.write(jsonObject.toString());
        printWriter.flush();
        printWriter.close();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

测试结果