是否有一种简单的单行方式来获取表单的数据,就像以经典的仅html方式提交表单一样?

例如:

<form>
    <input type="radio" name="foo" value="1" checked="checked" />
    <input type="radio" name="foo" value="0" />
    <input name="bar" value="xxx" />
    <select name="this">
        <option value="hi" selected="selected">Hi</option>
        <option value="ho">Ho</option>
</form>

输出:

{
    "foo": "1",
    "bar": "xxx",
    "this": "hi"
}

像这样的东西太简单了,因为它没有(正确地)包括文本区域,选择,单选按钮和复选框:

$("#form input").each(function () {
    data[theFieldName] = theFieldValue;
});

当前回答

2014年的最新答案:HTML5 FormData做到了这一点

var formData = new FormData(document.querySelector('form'))

然后,您可以准确地发布formData——它包含表单中使用的所有名称和值。

其他回答

基于jQuery。serializeArray,返回键值对。

var data = $('#form').serializeArray().reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
}, {});

如果您正在使用jQuery,这里有一个小函数可以做您正在寻找的事情。

首先,添加一个ID到你的表单(除非它是页面上唯一的表单,然后你可以只使用'form'作为dom查询)

<form id="some-form">
 <input type="radio" name="foo" value="1" checked="checked" />
 <input type="radio" name="foo" value="0" />
 <input name="bar" value="xxx" />
 <select name="this">
  <option value="hi" selected="selected">Hi</option>
  <option value="ho">Ho</option>
</form>

<script>
//read in a form's data and convert it to a key:value object
function getFormData(dom_query){
    var out = {};
    var s_data = $(dom_query).serializeArray();
    //transform into simple data/value object
    for(var i = 0; i<s_data.length; i++){
        var record = s_data[i];
        out[record.name] = record.value;
    }
    return out;
}

console.log(getFormData('#some-form'));
</script>

输出如下所示:

{
 "foo": "1",
 "bar": "xxx",
 "this": "hi"
}

$( "form" ).bind( "submit", function(e) { e.preventDefault(); console.log( $(this).serializeObject() ); //console.log( $(this).serialize() ); //console.log( $(this).serializeArray() ); }); $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each( a, function() { if ( o[this.name] !== undefined) { if ( ! o[this.name].push ) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <form> <input type="radio" name="foo" value="1" checked="checked" /> <input type="radio" name="foo" value="0" /> <input name="bar" value="xxx" /> <select name="this"> <option value="hi" selected="selected">Hi</option> <option value="ho">Ho</option> </select> <input type="submit" value="Submit" /> </form>

Codepen

$("#form input, #form select, #form textarea").each(function() {
 data[theFieldName] = theFieldValue;
});

除此之外,你可能想看看serialize();

这个方法应该可以做到。它序列化表单数据,然后将它们转换为对象。还可以处理复选框组。

function getFormObj(formId) {
  var formParams = {};
  $('#' + formId)
    .serializeArray()
    .forEach(function(item) {
      if (formParams[item.name]) {
        formParams[item.name] = [formParams[item.name]];
        formParams[item.name].push(item.value)
      } else {
        formParams[item.name] = item.value
      }
    });
  return formParams;
}