zoukankan      html  css  js  c++  java
  • FormData对象

    1、概念


    FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台。

    使用ajax时,使用FormData对象可以减少queryString的工作量(queryString是查询字符串,http查询字符串由url中?后面的值指定)。

    2、使用


      1)、创建对象

        

    var formData = new FormData();

      2) 、使用实例化对象

       假如有下面的form表单

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

     3、 操作方法


        1、获取数据:get(key)  或者  getAll(key)来获取对应的数据值

    formData.get("name"); // 获取key为name的第一个值
    formData.get("name"); // 返回一个数组,获取key为name的所有值

       

        2、添加数据: append(key, value)添加数据,如果key值不存在会增加一条值,如果存在则添加到数据的末尾

    1 formData.append("k1", "v1");
    2 formData.append("k1", "v2");
    3 formData.append("k1", "v1");
    4  
    5 formData.get("k1"); // "v1"
    6 formData.getAll("k1"); // ["v1","v2","v1"]

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

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

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

      

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

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

          迭代器的规则:

                1、每调用一次next()返回一条数据,数据的顺序由添加的顺序决定

                2、返回的是一个对象,当其done属性为true时,说明已经遍历完所有的数据,这个也可以作为判断的依据

                3、返回的对象的value属性以数组形式存储了一对key/value,数组下标0为key,下标1为value,如果一个key值对应多个value,会变成多对key/value返回

     1 formData.append("k1", "v1");
     2 formData.append("k1", "v2");
     3 formData.append("k2", "v1");
     4  
     5 var i = formData.entries();
     6  
     7 i.next(); // {done:false, value:["k1", "v1"]}
     8 i.next(); // {done:fase, value:["k1", "v2"]}
     9 i.next(); // {done:fase, value:["k2", "v1"]}
    10 i.next(); // {done:true, value:undefined}
  • 相关阅读:
    网页版台球小游戏
    代码写响应式时钟效果
    如何使用SVN?
    TP框架---View视图层---模板继承(举例说明)
    ThinkPhp框架:文件上传
    ThinkPhp框架:验证码功能
    ThinkPhp框架:父类及表单验证
    ThinkPhp框架对“数据库”的基本操作
    对thinkphp的命名空间的理解
    控制器操作方法的调用
  • 原文地址:https://www.cnblogs.com/lstcon/p/9839485.html
Copyright © 2011-2022 走看看