15

私のサイトには次のようなフォームがあります。

<form id="myform" action="" method="">
 <input type="text" name="name[1][first]">
 <input type="text" name="name[2][first]">
 <input type="text" name="name[3][first]">
</form>

私は単純にすべてのデータを取得して Web サービスに送信したいので、次の js を用意します。

$fields = $('#myform').serializeArray();

問題は、入力名に表示されているすべてのブラケットを使用して json を作成するため、解析エラーが発生することです。

serializeArray を使用して適切な json を取得するにはどうすればよいですか?

私が見たい結果のフォーマットは次のようなものです：

{
  "name": {
    "1": {
      "first": "val1"
    },
    "2": {
      "first": "val2"
    },
    "3": {
      "first": "val3"
    }
  }
}

ありがとう！

4

5 に答える 5

16

まさにこれを行うために再帰関数/プラグインを作成しました:

$.fn.serializeControls = function() {
  var data = {};

  function buildInputObject(arr, val) {
    if (arr.length < 1)
      return val;  
    var objkey = arr[0];
    if (objkey.slice(-1) == "]") {
      objkey = objkey.slice(0,-1);
    }  
    var result = {};
    if (arr.length == 1){
      result[objkey] = val;
    } else {
      arr.shift();
      var nestedVal = buildInputObject(arr,val);
      result[objkey] = nestedVal;
    }
    return result;
  }

  $.each(this.serializeArray(), function() {
    var val = this.value;
    var c = this.name.split("[");
    var a = buildInputObject(c, val);
    $.extend(true, data, a);
  });
  
  return data;
}

$("#output").html(JSON.stringify($('#myform').serializeControls(), null, 2));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form id="myform" action="" method="">
 <input type="text" name="name[1][first]" value="beep">
 <input type="text" name="name[1][second]" value="bloop">
 <input type="text" name="name[2][first]" value="derp">
  
 <input type="text" name="foo" value="bar">  
</form>

<pre id="output">
</pre>

全体以外のセレクターで呼び出すこともできますform。たとえば、次のように呼び出します。

$('input[name^="name\\["]').serializeControls()

フィールドのみを含むオブジェクトを返しnameます。その他の例については、 http://codepen.io/alexweissman/pen/MyWZdNを参照してください。

(現時点では)、これは空の括弧を含むフィールド名では機能しないことに注意してください (たとえば、input name="potatoes[]"一意のキーを抽出できないため、次のようなフィールドは無視されます)。

于 2016-02-28T23:29:24.483 に答える
0

配列を に正常にシリアル化した$fieldsので、それを調べて、より簡単に消化できる結果オブジェクトに変換できます。

var result = {};
for(var i in $fields) {
   var parts = $fields[i].name.split("[");
   var resultIndex = parseInt(parts[1].replace(']', ''), 10);
   result[resultIndex] = $fields[i].value; 
}

はグローバル変数の有効な名前ですが、この$fields件について黙っていることvarはできません. その結果、次のように呼び出してフィールドを取得できます。

var fields = $('#myform').serializeArray();
于 2012-06-20T20:04:45.787 に答える