表单序列化javascript(没有框架)

Question

想知道javascript中是否有一个函数没有jquery或任何允许我序列化表单并访问序列化版本的框架？

Answer 1

这是纯JavaScript方法:

var form = document.querySelector('form');
var data = new FormData(form);
var req = new XMLHttpRequest();
req.send(data);

虽然它似乎只适用于POST请求.

https://developer.mozilla.org/en-US/docs/Web/API/FormData

Answer 2

如果您的目标浏览器支持URLSearchParamsAPI(最新浏览器)和FormData(formElement)构造函数(除Edge之外的最新浏览器),请使用以下命令:

new URLSearchParams(new FormData(formElement)).toString()

对于支持URLSearchParams但不支持FormData(formElement)构造函数的浏览器,请使用此FormData polyfill和:

new URLSearchParams(Array.from(new FormData(formElement))).toString()

对于旧版浏览器(例如IE 10),请使用FormData polyfill,Array.from必要时使用polyfill,以及这个单行:

var form = document.querySelector('form');
var out = document.querySelector('output');

function updateResult() {
  try {
    out.textContent = new URLSearchParams(Array.from(new FormData(form)));
    out.className = '';
  } catch (e) {
    out.textContent = e;
    out.className = 'error';
  }
}

updateResult();
form.addEventListener('input', updateResult);

Answer 3

微型from-serialize库不依赖于框架.除此之外,您还需要自己实现序列化功能.(虽然重量为1.2千字节,为什么不使用它呢？)

Answer 4

function serialize (form) {
    if (!form || form.nodeName !== "FORM") {
            return;
    }
    var i, j, q = [];
    for (i = form.elements.length - 1; i >= 0; i = i - 1) {
        if (form.elements[i].name === "") {
            continue;
        }
        switch (form.elements[i].nodeName) {
            case 'INPUT':
                switch (form.elements[i].type) {
                    case 'text':
                    case 'tel':
                    case 'email':
                    case 'hidden':
                    case 'password':
                    case 'button':
                    case 'reset':
                    case 'submit':
                        q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
                        break;
                    case 'checkbox':
                    case 'radio':
                        if (form.elements[i].checked) {
                                q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
                        }                                               
                        break;
                }
                break;
                case 'file':
                break; 
            case 'TEXTAREA':
                    q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
                    break;
            case 'SELECT':
                switch (form.elements[i].type) {
                    case 'select-one':
                        q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
                        break;
                    case 'select-multiple':
                        for (j = form.elements[i].options.length - 1; j >= 0; j = j - 1) {
                            if (form.elements[i].options[j].selected) {
                                    q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].options[j].value));
                            }
                        }
                        break;
                }
                break;
            case 'BUTTON':
                switch (form.elements[i].type) {
                    case 'reset':
                    case 'submit':
                    case 'button':
                        q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
                        break;
                }
                break;
            }
        }
    return q.join("&");
}

资料来源:http://code.google.com/p/form-serialize/source/browse/trunk/serialize-0.1.js

Answer 5

这是TibTibs的略微修改版本:

function serialize(form) {
    var field, s = [];
    if (typeof form == 'object' && form.nodeName == "FORM") {
        var len = form.elements.length;
        for (i=0; i<len; i++) {
            field = form.elements[i];
            if (field.name && !field.disabled && field.type != 'file' && field.type != 'reset' && field.type != 'submit' && field.type != 'button') {
                if (field.type == 'select-multiple') {
                    for (j=form.elements[i].options.length-1; j>=0; j--) {
                        if(field.options[j].selected)
                            s[s.length] = encodeURIComponent(field.name) + "=" + encodeURIComponent(field.options[j].value);
                    }
                } else if ((field.type != 'checkbox' && field.type != 'radio') || field.checked) {
                    s[s.length] = encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value);
                }
            }
        }
    }
    return s.join('&').replace(/%20/g, '+');
}

禁用的字段将被丢弃,名称也会进行URL编码.在返回字符串之前,正则表达式替换%20个字符只发生一次.

查询字符串与jQuery的$ .serialize()方法的结果形式相同.

Answer 6

我从Johndave Decano的答案开始.

这应该可以解决对其功能的回复中提到的一些问题.

1. 用+符号替换%20.
2. 提交/按钮类型仅在单击提交表单时才会提交.
3. 重置按钮将被忽略.
4. 代码对我来说似乎是多余的,因为无论字段类型如何,代码都基本相同.更不用说与'tel'和'email'等HTML5字段类型不兼容,因此我使用switch语句删除了大部分细节.

如果按钮类型没有名称值,则仍会忽略它们.

function serialize(form, evt){
    var evt    = evt || window.event;
    evt.target = evt.target || evt.srcElement || null;
    var field, query='';
    if(typeof form == 'object' && form.nodeName == "FORM"){
        for(i=form.elements.length-1; i>=0; i--){
            field = form.elements[i];
            if(field.name && field.type != 'file' && field.type != 'reset'){
                if(field.type == 'select-multiple'){
                    for(j=form.elements[i].options.length-1; j>=0; j--){
                        if(field.options[j].selected){
                            query += '&' + field.name + "=" + encodeURIComponent(field.options[j].value).replace(/%20/g,'+');
                        }
                    }
                }
                else{
                    if((field.type != 'submit' && field.type != 'button') || evt.target == field){
                        if((field.type != 'checkbox' && field.type != 'radio') || field.checked){
                            query += '&' + field.name + "=" + encodeURIComponent(field.value).replace(/%20/g,'+');
                        }   
                    }
                }
            }
        }
    }
    return query.substr(1);
}

这就是我目前使用此功能的方式.

<form onsubmit="myAjax('http://example.com/services/email.php', 'POST', serialize(this, event))">

Answer 7

如果您需要使用json格式的POST提交表单"myForm",您可以:

const formEntries = new FormData(myForm).entries();
const json = Object.assign(...Array.from(formEntries, ([x,y]) => ({[x]:y})));
fetch('/api/foo', {
  method: 'POST',
  body: JSON.stringify(json)
});

第二行从如下数组转换:

[["firstProp", "firstValue"], ["secondProp", "secondValue"], ...and so on... ]

...进入常规对象,如:

{"firstProp": "firstValue", "secondProp": "secondValue", ...and so on ... }

...它通过将mapFn传入Array.from()来完成此转换.此mapFn应用于每个["a","b"]对并将它们转换为{"a":"b"},以便数组包含大量对象,每个对象只有一个属性.mapFn使用"destructuring"来获取该对的第一和第二部分的名称,并且它还使用ES6"ComputedPropertyName"来设置mapFn返回的对象中的属性名称(这就是为什么说"[ x]:"而不仅仅是"x:某种东西".

然后将所有这些单个属性对象传递给Object.assign()函数的参数,该函数将所有单个属性对象合并为具有所有属性的单个对象.

Array.from():https: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

参数解构:https: //simonsmith.io/destructuring-objects-as-function-parameters-in-es6/

有关计算属性名称的更多信息: 变量作为JavaScript对象文字中的属性名称？

Answer 8

适用于所有浏览器.

const formSerialize = formElement => {
  const values = {};
  const inputs = formElement.elements;

  for (let i = 0; i < inputs.length; i++) {
    values[inputs[i].name] = inputs[i].value;
  }
  return values;
}

const dumpValues = form => () => {
  
  const r = formSerialize(form);
  console.log(r);
  console.log(JSON.stringify(r));
}

const form = document.querySelector('form');

dumpValues(form)();

form.addEventListener('change',dumpValues(form));

<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" value="John">
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail" value="john@jonhson.j">
  </div>
  <div>
    <label for="interests">Interest:</label>
    <select required=""  id="interests" name="interests">
      <option value="" selected="selected">- None -</option>
      <option value="drums">Drums</option>
      <option value="js">Javascript</option>
      <option value="sports">Sports</option>
      <option value="trekking">Trekking</option>
    </select>
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message">Hello My Friend</textarea>
  </div>
</form>

Answer 9

HTMLElement.prototype.serialize = function(){
    var obj = {};
    var elements = this.querySelectorAll( "input, select, textarea" );
    for( var i = 0; i < elements.length; ++i ) {
        var element = elements[i];
        var name = element.name;
        var value = element.value;

        if( name ) {
            obj[ name ] = value;
        }
    }
    return JSON.stringify( obj );
}

要像这样使用:

var dataToSend = document.querySelector("form").serialize();

我希望我有所帮助.

Answer 10

如果您要序列化事件的输入。这是我使用的纯JavaScript方法。

// serialize form
var data = {};
var inputs = [].slice.call(e.target.getElementsByTagName('input'));
inputs.forEach(input => {
  data[input.name] = input.value;
});

数据将是输入的JavaScript对象。

Answer 11

一个重构版本的@ SimonSteinberger的代码使用较少的变量并利用forEach循环的速度(比fors 快一点)

function serialize(form) {
    var result = [];
    if (typeof form === 'object' && form.nodeName === 'FORM')
        Array.prototype.slice.call(form.elements).forEach(function(control) {
            if (
                control.name && 
                !control.disabled && 
                ['file', 'reset', 'submit', 'button'].indexOf(control.type) === -1
            )
                if (control.type === 'select-multiple')
                    Array.prototype.slice.call(control.options).forEach(function(option) {
                        if (option.selected) 
                            result.push(encodeURIComponent(control.name) + '=' + encodeURIComponent(option.value));
                    });
                else if (
                    ['checkbox', 'radio'].indexOf(control.type) === -1 || 
                    control.checked
                ) result.push(encodeURIComponent(control.name) + '=' + encodeURIComponent(control.value));
        });
        return result.join('&').replace(/%20/g, '+');
}

Answer 12

这可以通过非常简单的函数来完成，如下所示

function serialize(form) {
        let requestArray = [];
        form.querySelectorAll('[name]').forEach((elem) => {
            requestArray.push(elem.name + '=' + elem.value);
        });
        if(requestArray.length > 0)
            return requestArray.join('&');
        else
            return false;
    }

 serialized = serialize(document.querySelector('form'))
  console.log(serialized);

<form>

  <input type='text' name='fname' value='Johne'/>
  <input type='text' name='lname' value='Doe'/>
  <input type='text' name='contact[]' value='99999999'/>
  <input type='text' name='contact[]' value='34423434345'/>

</form>