JQueryを使ってフォームデータをJavaScriptオブジェクトに変換する
フォームのすべての要素をJavaScriptオブジェクトに変換する方法
各要素をループしなくても、自分のフォームからJavaScriptオブジェクトを自動的に作成する方法がいくつかあります。 $('#formid').serialize();から返されるような文字列は必要ありません。また、$('#formid').serializeArray();から返されるマップも必要としません。
serializeArray はすでに正確にそうしています。必要なフォーマットにデータを変換するだけです。
function objectifyForm(formArray) {//serialize data function
var returnArray = {};
for (var i = 0; i < formArray.length; i++){
returnArray[formArray[i]['name']] = formArray[i]['value'];
}
return returnArray;
}
上書きされるので実際の入力と同じ名前を持つ隠しフィールドに注意してください。
フォームをJSON LIKE A BOSSに変換する
電流源は GitHub そしてbowerにあります。
$ bower install jquery-serialize-object
次のコードは 非推奨 になりました。
次のコードは、あらゆる種類の入力名で機能します。そして期待通りにそれらを処理します。
例えば：
<!-- all of these will work! -->
<input name="honey[badger]" value="a">
<input name="wombat[]" value="b">
<input name="hello[panda][]" value="c">
<input name="animals[0][name]" value="d">
<input name="animals[0][breed]" value="e">
<input name="crazy[1][][wonky]" value="f">
<input name="dream[as][vividly][as][you][can]" value="g">
// output
{
"honey":{
"badger":"a"
},
"wombat":["b"],
"hello":{
"panda":["c"]
},
"animals":[
{
"name":"d",
"breed":"e"
}
],
"crazy":[
null,
[
{"wonky":"f"}
]
],
"dream":{
"as":{
"vividly":{
"as":{
"you":{
"can":"g"
}
}
}
}
}
}
使用法
$('#my-form').serializeObject();
ソーサリー（JavaScript）
(function($){
$.fn.serializeObject = function(){
var self = this,
json = {},
Push_counters = {},
patterns = {
"validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
"key": /[a-zA-Z0-9_]+|(?=\[\])/g,
"Push": /^$/,
"fixed": /^\d+$/,
"named": /^[a-zA-Z0-9_]+$/
};
this.build = function(base, key, value){
base[key] = value;
return base;
};
this.Push_counter = function(key){
if(Push_counters[key] === undefined){
Push_counters[key] = 0;
}
return Push_counters[key]++;
};
$.each($(this).serializeArray(), function(){
// skip invalid keys
if(!patterns.validate.test(this.name)){
return;
}
var k,
keys = this.name.match(patterns.key),
merge = this.value,
reverse_key = this.name;
while((k = keys.pop()) !== undefined){
// adjust reverse_key
reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');
// Push
if(k.match(patterns.Push)){
merge = self.build([], self.Push_counter(reverse_key), merge);
}
// fixed
else if(k.match(patterns.fixed)){
merge = self.build([], k, merge);
}
// named
else if(k.match(patterns.named)){
merge = self.build({}, k, merge);
}
}
json = $.extend(true, json, merge);
});
return json;
};
})(jQuery);
どうしたの：
var data = {};
$(".form-selector").serializeArray().map(function(x){data[x.name] = x.value;});
Tobias Cohenの解決策の修正版。これは0や''のような偽の値を正しく扱います。
jQuery.fn.serializeObject = function() {
var arrayData, objectData;
arrayData = this.serializeArray();
objectData = {};
$.each(arrayData, function() {
var value;
if (this.value != null) {
value = this.value;
} else {
value = '';
}
if (objectData[this.name] != null) {
if (!objectData[this.name].Push) {
objectData[this.name] = [objectData[this.name]];
}
objectData[this.name].Push(value);
} else {
objectData[this.name] = value;
}
});
return objectData;
};
コーディングに便利なCoffeeScriptバージョン
jQuery.fn.serializeObject = ->
arrayData = @serializeArray()
objectData = {}
$.each arrayData, ->
if @value?
value = @value
else
value = ''
if objectData[@name]?
unless objectData[@name].Push
objectData[@name] = [objectData[@name]]
objectData[@name].Push value
else
objectData[@name] = value
return objectData
Array.prototype.reduceはワンライナーで、 Underscore.js などに依存しないので、私は$('#formid').serializeArray()
.reduce(function(a, x) { a[x.name] = x.value; return a; }, {});
を使用するのが好きです。
Array.prototype.mapを使用した回答と似ていますが、追加のオブジェクト変数でスコープを乱雑にする必要はありません。ワンストップショッピング。重要な注意 ：重複する
name属性を持つ入力を持つフォームは有効なHTMLであり、実際には一般的な方法です。この場合、このスレッドでいずれかの回答を使用することは不適切です（オブジェクトキーは一意である必要があるため）。
これらすべての答えは私の頭の上にあるように見えた。簡単にするために言うべきことがあります。すべてのフォーム入力にname属性が設定されている限り、これはjim dandyだけで動作します。
$('form.myform').submit(function () { var $this = $(this) , viewArr = $this.serializeArray() , view = {}; for (var i in viewArr) { view[viewArr[i].name] = viewArr[i].value; } //Do stuff with view object here (e.g. JSON.stringify?) });
Underscore.js を使用している場合は、比較的簡潔に使用できます。
_.object(_.map($('#myform').serializeArray(), _.values))
各要素を調べずにこれを実行する方法は本当にありません。あなたが本当に知りたいことは、「他の誰かがすでにフォームをJSONオブジェクトに変換するメソッドを書いていますか」ということです。次のようなものでうまくいくはずです - POST（名前を持っていなければなりません）を介して返されるフォーム要素だけを与えることに注意してください。これは テストされていない です。
function formToJSON( selector )
{
var form = {};
$(selector).find(':input[name]:enabled').each( function() {
var self = $(this);
var name = self.attr('name');
if (form[name]) {
form[name] = form[name] + ',' + self.val();
}
else {
form[name] = self.val();
}
});
return form;
}
わかりました、私はこれがすでに非常に支持された答えを持っていることを知っています、しかしもう一つの 同様の質問がされました 最近、そして私もこの質問に向けられました。無効なフォーム要素を含めることができます（UIの機能によっては重要な場合があります）。
これが other SO question からの私の答えです。
当初、jQueryのserializeArray()メソッドを使用していましたが、無効になっているフォーム要素は含まれていません。ページ上の他のソースと「同期」されているフォーム要素を無効にすることがよくありますが、それでもシリアル化されたオブジェクトにデータを含める必要があります。だからserializeArray()は出ました。 :inputセレクターを使用して特定のコンテナー内のすべての入力要素（有効と無効の両方）を取得し、次に$.map()を使用してオブジェクトを作成しました。
var inputs = $("#container :input");
var obj = $.map(inputs, function(n, i)
{
var o = {};
o[n.name] = $(n).val();
return o;
});
console.log(obj);
これが機能するためには、あなたの入力のそれぞれがname属性を必要とすることに注意してください。それは結果のオブジェクトのプロパティの名前になるでしょう。
それは実際に私たちが使ったものからわずかに修正されています。 .NET IDictionaryとして構造化されたオブジェクトを作成する必要がありましたので、これを使用しました。
var obj = $.map(inputs, function(n, i)
{
return { Key: n.name, Value: $(n).val() };
});
console.log(obj);
どちらも$.map()関数の単純な使い方であり、あなたがあなたのセレクタを完全に制御できるので（これらの解決策の両方が好きです。また、追加のプラグインは必要ありません。普通のjQueryです。
この関数は、同じ名前の複数の要素と共に多次元配列を処理します。
私はこれまで数年間それを使ってきました：
jQuery.fn.serializeJSON=function() {
var json = {};
jQuery.map(jQuery(this).serializeArray(), function(n, i) {
var _ = n.name.indexOf('[');
if (_ > -1) {
var o = json;
_name = n.name.replace(/\]/gi, '').split('[');
for (var i=0, len=_name.length; i<len; i++) {
if (i == len-1) {
if (o[_name[i]]) {
if (typeof o[_name[i]] == 'string') {
o[_name[i]] = [o[_name[i]]];
}
o[_name[i]].Push(n.value);
}
else o[_name[i]] = n.value || '';
}
else o = o[_name[i]] = o[_name[i]] || {};
}
}
else {
if (json[n.name] !== undefined) {
if (!json[n.name].Push) {
json[n.name] = [json[n.name]];
}
json[n.name].Push(n.value || '');
}
else json[n.name] = n.value || '';
}
});
return json;
};
あなたはこれを行うことができます：
var frm = $(document.myform);
var data = JSON.stringify(frm.serializeArray());
_ json _を参照してください。
すべての与えられた答えでそこにあるいくつかの問題があります...
name[key]のように名前を配列として入力すると、このように生成されます
name:{
key : value
}
例えば ： 私がこのような形をしているならば。
<form>
<input name="name" value="value" >
<input name="name1[key1]" value="value1" >
<input name="name2[key2]" value="value2" >
<input name="name3[key3]" value="value3" >
</form>
それからそれはすべての与えられた答えでこのようなオブジェクトを生成します。
Object {
name : 'value',
name1[key1] : 'value1',
name2[key2] : 'value2',
name3[key3] : 'value3',
}
しかし、それは以下のように生成する必要があります、誰もがこのようになりたいのです。
Object {
name : 'value',
name1 : {
key1 : 'value1'
},
name2 : {
key2 : 'value2'
},
name3 : {
key2 : 'value2'
}
}
それから以下のjsコードを試してください。
(function($){
$.fn.getForm2obj = function(){
var _ = {},_t=this;
this.c = function(k,v){ eval("c = typeof "+k+";"); if(c == 'undefined') _t.b(k,v);}
this.b = function(k,v,a = 0){ if(a) eval(k+".Push("+v+");"); else eval(k+"="+v+";"); };
$.map(this.serializeArray(),function(n){
if(n.name.indexOf('[') > -1 ){
var keys = n.name.match(/[a-zA-Z0-9_]+|(?=\[\])/g),le = Object.keys(keys).length,tmp = '_';
$.map(keys,function(key,i){
if(key == ''){
eval("ale = Object.keys("+tmp+").length;");
if(!ale) _t.b(tmp,'[]');
if(le == (i+1)) _t.b(tmp,"'"+n['value']+"'",1);
else _t.b(tmp += "["+ale+"]",'{}');
}else{
_t.c(tmp += "['"+key+"']",'{}');
if(le == (i+1)) _t.b(tmp,"'"+n['value']+"'");
}
});
}else _t.b("_['"+n['name']+"']","'"+n['value']+"'");
});
return _;
}
})(jQuery);
console.log($('form').getForm2obj());<!DOCTYPE html><html><head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<title>Convert form data to JavaScript object with jQuery</title>
</head>
<body>
<form>
<input name="name" value="value" >
<input name="name1[key1]" value="value1" >
<input name="name2[key2]" value="value2" >
<input name="name3[key3]" value="value3" >
<input type="checkbox" name="name4[]" value="1" checked="checked">
<input type="checkbox" name="name4[]" value="2">
<input type="checkbox" name="name4[]" value="3">
</form>
</body></html>つかいます：
function form_to_json (selector) {
var ary = $(selector).serializeArray();
var obj = {};
for (var a = 0; a < ary.length; a++) obj[ary[a].name] = ary[a].value;
return obj;
}
出力：
{"myfield": "myfield value", "passwordfield": "mypasswordvalue"}
ワンライナー（jQuery以外の依存関係はありません）は、mapメソッドに渡される関数に固定オブジェクトバインディングを使用します。
$('form').serializeArray().map(function(x){this[x.name] = x.value; return this;}.bind({}))[0]
それは何ですか？
"id=2&value=1&comment=ok" => Object { id: "2", value: "1", comment: "ok" }
プログレッシブWebアプリケーションに適しています（通常のフォーム送信アクションとajaxリクエストの両方を簡単にサポートできます）。
シンプルさはここで最高です。私は単純な文字列を正規表現で置き換えることを使用しました、そして、彼らはこれまで魅力のように働きました。私は正規表現の専門家ではありませんが、非常に複雑なオブジェクトを追加することさえ可能です。
var values = $(this).serialize(),
attributes = {};
values.replace(/([^&]+)=([^&]*)/g, function (match, name, value) {
attributes[name] = value;
});
いくつか より古い answerから：
$('form input, form select').toArray().reduce(function(m,e){m[e.name] = $(e).val(); return m;},{})
mačekのソリューション を使用して、ASP.NET MVCが同じフォーム上でネストされた/複雑なオブジェクトを処理する方法で動作するように修正しました。あなたがしなければならないのはこれにvalidate部分を修正することです：
"validate": /^[a-zA-Z][a-zA-Z0-9_]*((?:\[(?:\d*|[a-zA-Z0-9_]+)\])*(?:\.)[a-zA-Z][a-zA-Z0-9_]*)*$/,
これは、一致してから、次のような名前の要素を正しくマップします。
<input type="text" name="zooName" />
そして
<input type="text" name="zooAnimals[0].name" />
私がこの問題に対して見つけた最も簡単で最も正確な方法は bbq plugin またはこの one （これは約0.5Kバイトのサイズです）を使うことでした。
多次元配列でも機能します。
$.fn.serializeObject = function()
{
return $.deparam(this.serialize());
};私はTobias Cohenのコードに問題を見つけました（直接コメントするのに十分なポイントがありません）。同じ名前の2つの選択オプションがあり、両方ともvalue = ""の場合、元のコードは "name"：[""、 ""]ではなく "name"： ""を生成します
これは、最初のif条件に "|| o [this.name] == ''"を追加することで解決できると思います。
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] || o[this.name] == '') {
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;
};
JQueryのためにそれをするためのプラグインがあります jquery.serializeJSON 。私は今、いくつかのプロジェクトでうまく使用しました。それは魅力のように働きます。
多次元のJavaScriptオブジェクトにフォームをコーディングして、プロダクションで使用しました。結果は https://github.com/serbanghita/formToObject.js です。
何かを対象にする（単体テストではない）
<script type="text/javascript">
string = {};
string.repeat = function(string, count)
{
return new Array(count+1).join(string);
}
string.count = function(string)
{
var count = 0;
for (var i=1; i<arguments.length; i++)
{
var results = string.match(new RegExp(arguments[i], 'g'));
count += results ? results.length : 0;
}
return count;
}
array = {};
array.merge = function(arr1, arr2)
{
for (var i in arr2)
{
if (arr1[i] && typeof arr1[i] == 'object' && typeof arr2[i] == 'object')
arr1[i] = array.merge(arr1[i], arr2[i]);
else
arr1[i] = arr2[i]
}
return arr1;
}
array.print = function(obj)
{
var arr = [];
$.each(obj, function(key, val) {
var next = key + ": ";
next += $.isPlainObject(val) ? array.print(val) : val;
arr.Push( next );
});
return "{ " + arr.join(", ") + " }";
}
node = {};
node.objectify = function(node, params)
{
if (!params)
params = {};
if (!params.selector)
params.selector = "*";
if (!params.key)
params.key = "name";
if (!params.value)
params.value = "value";
var o = {};
var indexes = {};
$(node).find(params.selector+"["+params.key+"]").each(function()
{
var name = $(this).attr(params.key),
value = $(this).attr(params.value);
var obj = $.parseJSON("{"+name.replace(/([^\[]*)/, function()
{
return '"'+arguments[1]+'"';
}).replace(/\[(.*?)\]/gi, function()
{
if (arguments[1].length == 0)
{
var index = arguments[3].substring(0, arguments[2]);
indexes[index] = indexes[index] !== undefined ? indexes[index]+1 : 0;
return ':{"'+indexes[index]+'"';
}
else
return ':{"'+escape(arguments[1])+'"';
})+':"'+value.replace(/[\\"]/gi, function()
{
return "\\"+arguments[0];
})+'"'+string.repeat('}', string.count(name, ']'))+"}");
o = array.merge(o, obj);
});
return o;
}
</script>
テストの出力：
$(document).ready(function()
{
console.log(array.print(node.objectify($("form"), {})));
console.log(array.print(node.objectify($("form"), {selector: "select"})));
});
に
<form>
<input name='input[a]' type='text' value='text'/>
<select name='input[b]'>
<option>select</option>
</select>
<input name='otherinput[c][a]' value='a'/>
<input name='otherinput[c][]' value='b'/>
<input name='otherinput[d][b]' value='c'/>
<input name='otherinput[c][]' value='d'/>
<input type='hidden' name='anotherinput' value='hidden'/>
<input type='hidden' name='anotherinput' value='1'/>
<input type='submit' value='submit'/>
</form>
得られます：
{ input: { a: text, b: select }, otherinput: { c: { a: a, 0: b, 1: d }, d: { b: c } }, anotherinput: 1 }
{ input: { b: select } }
最近同じ問題が発生し、フォームを同じ構造のJSONオブジェクトに変換する this .toJSON jQuery plugin が出てきました。これは、ユーザーが特定の場所にさらにフィールドを追加できるようにする動的に生成されたフォームにも非常に便利です。
重要なのは、実際にフォームを構築して、それ自体が構造を持つようにすることです。したがって、ユーザーが町でお気に入りの場所を挿入するフォームを作成するとしましょう。このフォームは、<places>...</places>ユーザーが好む場所のリスト。したがって、それぞれが例えば<place>...</place>要素、<name>...</name>要素を含む<type>...</type>要素のリスト、そしてそのような場所で実行できるアクティビティを表す<activity>...</activity>要素のリスト。したがって、XML構造は次のようになります。
<places>
<place>
<name>Home</name>
<type>dwelling</type>
<activity>sleep</activity>
<activity>eat</activity>
<activity>watch TV</activity>
</place>
<place>...</place>
<place>...</place>
</places>
この正確な構造を表すJSONオブジェクトをこれから作成することは、どれだけクールなことでしょう。
- このオブジェクトをそのまま CouchDB -likeデータベースに保存します
- それを$ _POST []サーバー側から読み取り、正しくネストされた配列を取得してから、意味的に操作できます
- サーバー側のスクリプトを使用して、整形式のXMLファイルに変換します（正確な構造が事前にわからない場合でも）
- Node.js -likeサーバースクリプトの場合と同じように使用します
それでは、フォームがXMLファイルをどのように表現できるかを考える必要があります。
もちろん、<form>タグはrootですが、データ要素そのものではなく、コンテナである<place>要素があるため、入力タグを使用することはできません。
<fieldset>タグが役立つのはここです！ <fieldset>タグを使用して、すべてのコンテナ要素をフォーム/ XML表現で表し、次のような結果を取得します。
<form name="places">
<fieldset name="place">
<input type="text" name="name"/>
<select name="type">
<option value="dwelling">Dwelling</option>
<option value="restoration">Restoration</option>
<option value="sport">Sport</option>
<option value="administrative">Administrative</option>
</select>
<input type="text" name="activity"/>
<input type="text" name="activity"/>
<input type="text" name="activity"/>
</fieldset>
</form>
このフォームでわかるように、一意の名前の規則を破っていますが、要素の配列に変換され、配列内のインデックスによってのみ参照されるため、これは問題ありません。
この時点で、フォーム内にname="array[]"のような名前がなく、すべてがきれいでシンプルでセマンティックであることがわかります。
このフォームを、次のようなJSONオブジェクトに変換する必要があります。
{'places':{
'place':[
{
'name': 'Home',
'type': 'dwelling',
'activity':[
'sleep',
'eat',
'watch TV'
]
},
{...},
{...}
]
}}
これを行うために、 this jQuery plugin here 誰かが最適化を支援しました thisCode Reviewthread =そして次のようになります：
$.fn.toJSO = function () {
var obj = {},
$kids = $(this).children('[name]');
if (!$kids.length) {
return $(this).val();
}
$kids.each(function () {
var $el = $(this),
name = $el.attr('name');
if ($el.siblings("[name=" + name + "]").length) {
if (!/radio|checkbox/i.test($el.attr('type')) || $el.prop('checked')) {
obj[name] = obj[name] || [];
obj[name].Push($el.toJSO());
}
} else {
obj[name] = $el.toJSO();
}
});
return obj;
};
この1つのブログ投稿 を作成して、これをさらに説明しました。
これにより、フォーム内のすべてがJSONに変換され（ラジオやチェックボックスも）、あとは呼び出すだけです
$.post('script.php',('form').toJSO(), ...);
フォームをJSONオブジェクトに変換する方法はたくさんあり、ほとんどの場合.serialize()と.serializeArray()がうまく機能し、主に使用することを意図していることを知っていますが、意味のある名前を持つXML構造としてフォームを記述し、整形式のJSONオブジェクトに変換する試してみる価値があります。また、同じ名前の入力タグを心配は、動的に生成されたフォームデータを取得する必要がある場合に非常に便利です。
これが誰かの助けになることを願っています！
選択したソリューションに問題が見つかりました。
配列ベースの名前を持つフォームを使うとき、jQuery serializeArray（）関数は実際には死にます。
私はPHPフレームワークを使用して、配列ベースのフィールド名を使用して、同じフォームを複数のビューで同じページに複数回配置できるようにします。これは、フォームモデルが競合することなく、追加、編集、削除の両方を同じページに配置するのに便利です。
この絶対的な基本機能を削除せずにフォームを隔離することを望んでいたので、私は自分自身のseralizeArray（）を書くことにしました：
var $vals = {};
$("#video_edit_form input").each(function(i){
var name = $(this).attr("name").replace(/editSingleForm\[/i, '');
name = name.replace(/\]/i, '');
switch($(this).attr("type")){
case "text":
$vals[name] = $(this).val();
break;
case "checkbox":
if($(this).attr("checked")){
$vals[name] = $(this).val();
}
break;
case "radio":
if($(this).attr("checked")){
$vals[name] = $(this).val();
}
break;
default:
break;
}
});
注意：これはform submit（）の外部でも機能するので、コードの残りの部分でエラーが発生した場合、「変更を保存」というリンクボタンをクリックしてもフォームは送信されません。
また、この関数は、検証のためにサーバー側に送信するデータを収集するためだけにフォームを検証するために使用しないでください。このような弱く大量に割り当てられたコードを使用すると、 _ xss _ などが発生します。
2つのコレクションを繰り返す必要はありません。必要に応じて "name"と "value"以外のものを取得し、それらをオブジェクトに格納する前にサニタイズすることができます保存したくないデフォルト値がある場合など）。
$.formObject = function($o) {
var o = {},
real_value = function($field) {
var val = $field.val() || "";
// additional cleaning here, if needed
return val;
};
if (typeof o != "object") {
$o = $(o);
}
$(":input[name]", $o).each(function(i, field) {
var $field = $(field),
name = $field.attr("name"),
value = real_value($field);
if (o[name]) {
if (!$.isArray(o[name])) {
o[name] = [o[name]];
}
o[name].Push(value);
}
else {
o[name] = value;
}
});
return o;
}
こんな感じで使う：
var obj = $.formObject($("#someForm"));
Firefoxでのみテストされています。
lodash＃set を使用する
let serialized = [
{ key: 'data[model][id]', value: 1 },
{ key: 'data[model][name]', value: 'product' },
{ key: 'sid', value: 'dh0un1hr4d' }
];
serialized.reduce(function(res, item) {
_.set(res, item.key, item.value);
return res;
}, {});
// returns
{
"data": {
"model": {
"id": 1,
"name": "product"
}
},
"sid": "dh0un1hr4d"
}
私はsamuels版が好きです、しかし、私はそれには少し誤りがあると思います。通常JSONは
{"coreSKU"： "PCGUYJS"、 "name_de"： "何でも"、...
ではない
[{"coreSKU"： "PCGUYJS"}、{"name_de"： "whatever"}、...
だから関数IMOは読むべきである：
App.toJson = function( selector ) {
var o = {};
$.map( $( selector ), function( n,i )
{
o[n.name] = $(n).val();
});
return o;
}
そしてそれをデータ配列でラップし（一般的にも期待通り）、最後にそれをastring App.stringify（{data：App.toJson（ '#cropform：input'）}）として送信します
Stringifyについては、 質問3593046 を参照してください。リーンバージョンは json2.js にあり、最終的にカバーされるバージョンはすべてです。それはそれをすべてカバーするはずです:)
迅速で最新の解決策を得るには、 JSONify jQueryプラグインを使用してください。以下の例はGitHub READMEから逐語的に引用されています。プラグインの作者Kushal Pandyaの功績によるものです。
与えられた：
<form id="myform">
<label>Name:</label>
<input type="text" name="name"/>
<label>Email</label>
<input type="text" name="email"/>
<label>Password</label>
<input type="password" name="password"/>
</form>
ランニング：
$('#myform').jsonify();
を生成します。
{"name":"Joe User","email":"[email protected]","password":"mypass"}
このJSONオブジェクトを使ってjQuery POSTを実行したい場合は、次のようにします。
$('#mybutton').click(function() {
$.post('/api/user', JSON.stringify($('#myform').jsonify()));
}
もう一つの答え
document.addEventListener("DOMContentLoaded", function() {
setInterval(function() {
var form = document.getElementById('form') || document.querySelector('form[name="userprofile"]');
var json = Array.from(new FormData(form)).map(function(e,i) {this[e[0]]=e[1]; return this;}.bind({}))[0];
console.log(json)
document.querySelector('#asJSON').value = JSON.stringify(json);
}, 1000);
})<form name="userprofile" id="form">
<p>Name <input type="text" name="firstname" value="John"/></p>
<p>Family name <input name="lastname" value="Smith"/></p>
<p>Work <input name="employment[name]" value="inc, Inc."/></p>
<p>Works since <input name="employment[since]" value="2017" /></p>
<p>Photo <input type="file" /></p>
<p>Send <input type="submit" /></p>
</form>
JSON: <textarea id="asJSON"></textarea>FormData： https://developer.mozilla.org/en-US/docs/Web/API/FormData
私はXSS攻撃やおそらく他の多くの問題のためにライブサイトでこれを使用しませんが、ここにあなたが何ができるかの簡単な例を示します。
$("#myform").submit(function(){
var arr = $(this).serializeArray();
var json = "";
jQuery.each(arr, function(){
jQuery.each(this, function(i, val){
if (i=="name") {
json += '"' + val + '":';
} else if (i=="value") {
json += '"' + val.replace(/"/g, '\\"') + '",';
}
});
});
json = "{" + json.substring(0, json.length - 1) + "}";
// do something with json
return false;
});
JSONでフォームを送信している場合は、文字列を送信するときに[]を削除する必要があります。これはjQuery関数serializeObject（）を使って行うことができます。
var frm = $(document.myform);
var data = JSON.stringify(frm.serializeObject());
$.fn.serializeObject = function() {
var o = {};
//var a = this.serializeArray();
$(this).find('input[type="hidden"], input[type="text"], input[type="password"], input[type="checkbox"]:checked, input[type="radio"]:checked, select').each(function() {
if ($(this).attr('type') == 'hidden') { //If checkbox is checked do not take the hidden field
var $parent = $(this).parent();
var $chb = $parent.find('input[type="checkbox"][name="' + this.name.replace(/\[/g, '\[').replace(/\]/g, '\]') + '"]');
if ($chb != null) {
if ($chb.prop('checked')) return;
}
}
if (this.name === null || this.name === undefined || this.name === '')
return;
var elemValue = null;
if ($(this).is('select'))
elemValue = $(this).find('option:selected').val();
else
elemValue = this.value;
if (o[this.name] !== undefined) {
if (!o[this.name].Push) {
o[this.name] = [o[this.name]];
}
o[this.name].Push(elemValue || '');
}
else {
o[this.name] = elemValue || '';
}
});
return o;
}
フォームをJavaScriptオブジェクトに変換したい場合は、（現時点で）最も簡単な解決策はjQueryのeachおよびserializeArray関数メソッドを使用することです。
$.fn.serializeObject = function() {
var form = {};
$.each($(this).serializeArray(), function (i, field) {
form[field.name] = field.value || "";
});
return form;
};
GitHubでホストされているプラグイン：
https://github.com/tfmontague/form-object/blob/master/README.md
Bowerと一緒にインストールできます： bower install git://github.com/tfmontague/form-object.git
それで私は受け入れられた答えを使い、大きな欠陥を見つけました。
次のような入力配列はサポートされていません。
<input type="checkbox" name="array[]" value="1"/>
<input type="checkbox" name="array[]" value="2"/>
<input type="checkbox" name="array[]" value="3"/>
この小さな変更はそれを修正する必要があります。
function objectifyForm(inp){
var rObject = {};
for (var i = 0; i < inp.length; i++){
if(inp[i]['name'].substr(inp[i]['name'].length - 2) == "[]"){
var tmp = inp[i]['name'].substr(0, inp[i]['name'].length-2);
if(Array.isArray(rObject[tmp])){
rObject[tmp].Push(inp[i]['value']);
} else{
rObject[tmp] = [];
rObject[tmp].Push(inp[i]['value']);
}
} else{
rObject[inp[i]['name']] = inp[i]['value'];
}
}
return rObject;
}
$(this).serializeArray();からの出力を渡すことを忘れないでください。
上記のTobiasの解決策は正しいものですが、コメント投稿者@macekが指摘したように、foo [bar]型の入力を処理し、それらをサブオブジェクトに分割することはしません。
これはPHP専用の機能ですが、JavaScriptで同じ構造を生成できると非常に便利です。
私は上記のTobiasのコードを修正しただけなので、すべての功績は彼にかかっています。これはおそらくもっときれいにすることができますが、私は5分でそれをホイップアップして、それが役に立つかもしれないと思った。
現時点では、多次元配列や数値インデックス配列は処理しません。つまり、foo []ではなくfoo [bar]という名前でのみ機能します。
jQuery.fn.serializeObjectPHP = function()
{
var o = {};
var re = /^(.+)\[(.*)\]$/;
var a = this.serializeArray();
var n;
jQuery.each(a, function() {
var name = this.name;
if ((n = re.exec(this.name)) && n[2]) {
if (o[n[1]] === undefined) {
o[n[1]] = {};
o[n[1]][n[2]] = this.value || '';
} else if (o[n[1]][n[2]] === undefined) {
o[n[1]][n[2]] = this.value || '';
} else {
if(!o[n[1]][n[2]].Push) {
o[n[1]][n[2]] = [ o[n[1]][n[2]] ];
}
o[n[1]][n[2]].Push(this.value || '');
}
} else {
if (n && !n[2]) {
name = n[1];
}
if (o[name] !== undefined) {
if (!o[name].Push) {
o[name] = [o[name]];
}
o[name].Push(this.value || '');
} else {
o[name] = this.value || '';
}
}
});
return o;
};
より現代的な方法は、このようにserializeArray()とreduceを使うことです。
$('#formid').serializeArray()
.reduce((a, x) => ({ ...a, [x.name]: x.value }), {});
それは多くの「正常な」場合に役立ちます。
重複するname属性を持つ複数のタグがある非常に一般的な例では、これでは不十分です。
次の例のように、重複するname属性を持つ入力は通常、いくつかの 'wrapper'（div、ul、tr、...）の中にあるので
<div class="wrapperClass">
<input type="text" name="one">
<input type="text" name="two">
</div>
<div class="wrapperClass">
<input type="text" name="one">
<input type="text" name="two">
</div>
それらを反復するためにmap演算子と共にreduceを使うことができます：
$(".wrapperClass").map(function () {
return $(this).find('*').serializeArray()
.reduce((a, x) => ({ ...a, [x.name]: x.value }), {});
}).get();
結果は次の形式のオブジェクトの配列になります。
[
{
one: valueOfOne,
two: valueOfTwo
}, {
one: valueOfOne,
two: valueOfTwo
}
]
より明確な結果を与えるjQueryオブジェクトではなく、.get()演算子をmapと組み合わせて基本配列を取得します。 jQueryのドキュメント
この解決策は優れています。チェックボックスがチェックされていない場合、ここでよく使われるオプションの中には、チェックボックスを正しく処理できないものがあります。
getData: function(element){
//@todo may need additional logic for radio buttons
var select = $(element).find('select');
var input = $(element).find('input');
var inputs = $.merge(select,input);
var data = {};
//console.log(input,'input');
$.each(inputs,function(){
if($(this).attr('type') != undefined){
switch($(this).attr('type')){
case 'checkbox':
data[$(this).attr('name')] = ( ($(this).attr('checked') == 'checked') ? $(this).val():0 );
break;
default:
data[$(this).attr('name')] = $(this).val();
break;
}
}
else{
data[$(this).attr('name')] = $(this).val();
}
})
return data;
}
私のライブラリからの私のコード phery は、本当に複雑なフォームを扱うことができる直列化ルーチンを得ました（デモ https://github.com/pocesar/phery/blob/master/demo.phpのように） ＃L1664 ）、そしてそれは万能型ではありません。実際には各フィールドの型が何であるかを調べます。たとえば、ラジオボックスは範囲と同じではなく、keygenと同じでもなく、select multipleと同じでもありません。私の機能はそれをすべてカバーしています、そしてあなたは https://github.com/pocesar/phery/blob/master/phery.js#L1851 でそれを見ることができます。
serializeForm:function (opt) {
opt = $.extend({}, opt);
if (typeof opt['disabled'] === 'undefined' || opt['disabled'] === null) {
opt['disabled'] = false;
}
if (typeof opt['all'] === 'undefined' || opt['all'] === null) {
opt['all'] = false;
}
if (typeof opt['empty'] === 'undefined' || opt['empty'] === null) {
opt['empty'] = true;
}
var
$form = $(this),
result = {},
formValues =
$form
.find('input,textarea,select,keygen')
.filter(function () {
var ret = true;
if (!opt['disabled']) {
ret = !this.disabled;
}
return ret && $.trim(this.name);
})
.map(function () {
var
$this = $(this),
radios,
options,
value = null;
if ($this.is('[type="radio"]') || $this.is('[type="checkbox"]')) {
if ($this.is('[type="radio"]')) {
radios = $form.find('[type="radio"][name="' + this.name + '"]');
if (radios.filter('[checked]').size()) {
value = radios.filter('[checked]').val();
}
} else if ($this.prop('checked')) {
value = $this.is('[value]') ? $this.val() : 1;
}
} else if ($this.is('select')) {
options = $this.find('option').filter(':selected');
if ($this.prop('multiple')) {
value = options.map(function () {
return this.value || this.innerHTML;
}).get();
} else {
value = options.val();
}
} else {
value = $this.val();
}
return {
'name':this.name || null,
'value':value
};
}).get();
if (formValues) {
var
i,
value,
name,
$matches,
len,
offset,
j,
fields;
for (i = 0; i < formValues.length; i++) {
name = formValues[i].name;
value = formValues[i].value;
if (!opt['all']) {
if (value === null) {
continue;
}
} else {
if (value === null) {
value = '';
}
}
if (value === '' && !opt['empty']) {
continue;
}
if (!name) {
continue;
}
$matches = name.split(/\[/);
len = $matches.length;
for (j = 1; j < len; j++) {
$matches[j] = $matches[j].replace(/\]/g, '');
}
fields = [];
for (j = 0; j < len; j++) {
if ($matches[j] || j < len - 1) {
fields.Push($matches[j].replace("'", ''));
}
}
if ($matches[len - 1] === '') {
offset = assign_object(result, fields, [], true, false, false);
if (value.constructor === Array) {
offset[0][offset[1]].concat(value);
} else {
offset[0][offset[1]].Push(value);
}
} else {
assign_object(result, fields, value);
}
}
}
return result;
}
それは私のライブラリの一部です phery 、しかしそれはあなた自身のプロジェクトに移植することができます。配列があるべき場所に配列を作成し、select、normalizeチェックボックスオプションなどから正しい選択オプションを取得します。それをJSON（実際のJSON文字列）に変換したい場合は、JSON.stringify($('form').serializeForm());を実行してください。
const formData = new FormData(form);
let formDataJSON = {};
for (const [key, value] of formData.entries()) {
formDataJSON[key] = value;
}
これはTobias Cohenの関数の改良であり、多次元配列でうまく機能します。
http://jsfiddle.net/BNnwF/2/ /
ただし、これはjQueryプラグインではありませんが、そのように使用したい場合は、1つにするのに数秒かかるだけです。単に関数宣言ラッパーを置き換えるだけです。
function serializeFormObject(form)
{
...
}
と：
$.fn.serializeFormObject = function()
{
var form = this;
...
};
私はそれが同じことをするという点でmacekの解決策に似ていると思いますが、私はこれが少しきれいでより単純であると思います。また、macekのテストケースの入力をフィドルに含め、いくつか追加しました。これまでのところ、これは私のためにうまくいきます。
function serializeFormObject(form)
{
function trim(str)
{
return str.replace(/^\s+|\s+$/g,"");
}
var o = {};
var a = $(form).serializeArray();
$.each(a, function() {
var nameParts = this.name.split('[');
if (nameParts.length == 1) {
// New value is not an array - so we simply add the new
// value to the result object
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 || '';
}
}
else {
// New value is an array - we need to merge it into the
// existing result object
$.each(nameParts, function (index) {
nameParts[index] = this.replace(/\]$/, '');
});
// This $.each merges the new value in, part by part
var arrItem = this;
var temp = o;
$.each(nameParts, function (index) {
var next;
var nextNamePart;
if (index >= nameParts.length - 1)
next = arrItem.value || '';
else {
nextNamePart = nameParts[index + 1];
if (trim(this) != '' && temp[this] !== undefined)
next = temp[this];
else {
if (trim(nextNamePart) == '')
next = [];
else
next = {};
}
}
if (trim(this) == '') {
temp.Push(next);
} else
temp[this] = next;
temp = next;
});
}
});
return o;
}
私は最近同じ問題を抱えていたので、フォームのコントロールを解析してコントロールのID /値を取得し、それをJSONに変換できるようにする関数を開発しました。
コントロールを追加するのに十分な柔軟性があります。値として解釈するコントロールの種類と属性を指定するだけです。
完全なスクリプトはこちら にあります。
利点は、オブジェクト全体をドラッグせずに、実際に必要なデータだけが取得されることです。
不利な点は、ネストしたオプションがある場合は、それに応じてIDを前に付ける必要があるので、その特定のグループに重複したオプションを使用できることです。
これが役に立つことを願っています！
これはjQuery以外の方法です。
var getFormData = function(form) {
//Ignore the submit button
var elements = Array.prototype.filter.call(form.elements, function(element) {
var type = element.getAttribute('type');
return !type || type.toLowerCase() !== 'submit';
});
あなたはこのようにそれを使うことができます：
function() {
var getFormData = function(form) {
//Ignore the submit button
var elements = Array.prototype.filter.call(form.elements, function(element) {
var type = element.getAttribute('type');
return !type || type.toLowerCase() !== 'submit';
});
//Make an object out of the form data: {name: value}
var data = elements.reduce(function(data, element) {
data[element.name] = element.value;
return data;
}, {});
return data;
};
var post = function(action, data, callback) {
var request = new XMLHttpRequest();
request.onload = callback;
request.open('post', action);
request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
request.send(JSON.stringify(data), true);
request.send();
};
var submit = function(e) {
e.preventDefault();
var form = e.target;
var action = form.action;
var data = getFormData(form);
//change the third argument in order to do something
//more intersting with the response than just print it
post(action, data, console.log.bind(console));
}
//change formName below
document.formName.onsubmit = submit;
})();
Serialize関数はJSONオブジェクトをパラメータとして受け取り、serialize Stringを返します。
function serialize(object) {
var _SPECIAL_CHARS = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g, _CHARS = {
'\b' : '\\b',
'\t' : '\\t',
'\n' : '\\n',
'\f' : '\\f',
'\r' : '\\r',
'"' : '\\"',
'\\' : '\\\\'
}, EMPTY = '', OPEN_O = '{', CLOSE_O = '}', OPEN_A = '[', CLOSE_A = ']', COMMA = ',', COMMA_CR = ",\n", CR = "\n", COLON = ':', space = "", COLON_SP = ': ', stack = [], QUOTE = '"';
function _char(c) {
if (!_CHARS[c]) {
_CHARS[c] = '\\u' + ('0000' + (+(c.charCodeAt(0))).toString(16))
.slice(-4);
}
return _CHARS[c];
}
function _string(s) {
return QUOTE + s.replace(_SPECIAL_CHARS, _char) + QUOTE;
// return str.replace('\"','').replace('\"','');
}
function serialize(h, key) {
var value = h[key], a = [], colon = ":", arr, i, keys, t, k, v;
arr = value instanceof Array;
stack.Push(value);
keys = value;
i = 0;
t = typeof value;
switch (t) {
case "object" :
if(value==null){
return null;
}
break;
case "string" :
return _string(value);
case "number" :
return isFinite(value) ? value + EMPTY : NULL;
case "boolean" :
return value + EMPTY;
case "null" :
return null;
default :
return undefined;
}
arr = value.length === undefined ? false : true;
if (arr) { // Array
for (i = value.length - 1; i >= 0; --i) {
a[i] = serialize(value, i) || NULL;
}
}
else { // Object
i = 0;
for (k in keys) {
if (keys.hasOwnProperty(k)) {
v = serialize(value, k);
if (v) {
a[i++] = _string(k) + colon + v;
}
}
}
}
stack.pop();
if (space && a.length) {
return arr
? "[" + _indent(a.join(COMMA_CR), space) + "\n]"
: "{\n" + _indent(a.join(COMMA_CR), space) + "\n}";
}
else {
return arr ? "[" + a.join(COMMA) + "]" : "{" + a.join(COMMA)
+ "}";
}
}
return serialize({
"" : object
}, "");
}
私はフォームライブラリを恥知らずな自己宣伝する必要がありました。
transForm.js
それは次のようなことをします：シリアライズ、デシリアライズ、クリア、フォームの送信。
私がこれを作った理由はform2js/js2formが維持されず、私が望むほど柔軟で速くないということです。これはform2js/js2formと互換性があるので本番で使用します。
私はjQueryモジュール jsForm を書きました。これは非常に複雑なフォームでもこの双方向を実現できます（コレクションや他のより複雑な構造も可能です）。
これはフィールドの名前（およびコレクション用のいくつかの特別なクラス）を使用し、JSONオブジェクトと一致します。コレクションとデータ処理のためにDOM要素の自動複製を可能にします。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://raw.github.com/corinis/jsForm/master/src/jquery.jsForm.js"></script>
<script>
$(function(){
// Some JSON data
var jsonData = {
name: "TestName", // Standard inputs
description: "long Description\nMultiline", // Textarea
links: [{href:'http://stackoverflow.com',description:'StackOverflow'}, {href:'http://www.github.com', description:'GitHub'}], // Lists
active: true, // Checkbox
state: "VISIBLE" // Selects (enums)
};
// Initialize the form, prefix is optional and defaults to data
$("#details").jsForm({
data:jsonData
});
$("#show").click(function() {
// Show the JSON data
alert(JSON.stringify($("#details").jsForm("get"), null, " "));
});
});
</script>
</head>
<body>
<h1>Simpel Form Test</h1>
<div id="details">
Name: <input name="data.name"/><br/>
<input type="checkbox" name="data.active"/> active<br/>
<textarea name="data.description"></textarea><br/>
<select name="data.state">
<option value="VISIBLE">visible</option>
<option value="IMPORTANT">important</option>
<option value="HIDDEN">hidden</option>
</select>
<fieldset>
<legend>Links</legend>
<ul class="collection" data-field="data.links">
<li><span class="field">links.description</span> Link: <input name="links.href"/> <button class="delete">x</button></li>
</ul>
</fieldset>
<button class="add" data-field="data.links">add a link</button><br/>
Additional field: <input name="data.addedField"/>
</div>
<button id="show">Show Object</button>
</body>
</html>