form表单控件name与value快速拼接

2019-06-05184次阅读javascript

FormData()构造函数用于创建一个新的FormData对象,通过参数form可以实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率。

语法

var formData = new FormData(form)

参数

form(可选)

一个HTML上的<form>表单元素——当指定了,这种方式创建的FormData对象会自动将form中的表单值也包含进去,包括文件内容也会被编码之后包含进去。

<form id="myForm" name="myForm">
  <div>
    <label for="username">Enter name:</label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="useracc">Enter account number:</label>
    <input type="text" id="useracc" name="useracc">
  </div>
  <div>
    <label for="userfile">Upload file:</label>
    <input type="file" id="userfile" name="userfile">
  </div>
<input type="submit" value="Submit!">
</form>

注意: 所有的输入元素都需要有name属性,否则无法访问到值。

var myForm = document.getElementById('myForm');
formData = new FormData(myForm);
var xhr=new XMLHttpRequest();
xhr.open("post","http://127.0.0.1/adv");
xhr.send(formData);
xhr.onload=function(){
    if(xhr.status==200){
        //...
    }
}

浏览器兼容:IE10+。

需要form表单控件name与value快速拼接浏览器全兼容的,可以试试下面这个:

function serialize(form){

    const elements = form.elements;

    let i = elements.length - 1;

    let arry = [];

    for(;elements[i]; i--){

        const input = <HTMLInputElement>elements[i];

        switch(input.type){
            case undefined:
            case 'button':
            case 'submit':
                break;
            default:
                if( input.name ){
                    arry.push( `${input.name}=${ encodeURIComponent(input.value)}` )
                }
        }
    }
    return arry.join('&');
}

serialize( document.getElementById('myForm') )

注意:serialize返回的是&拼接的一个字符串,如有需要返回对象请自行修改。

上一篇: 移动端1px问题  下一篇: Node获取npm命令行参数  

form表单控件name与value快速拼接相关文章