jQueryによって送信され、ノードJsによって受信されたJSONとして配列フォームデータを受信

Question

私はノードJsで遊んでいますが、このアプリケーションでは学習プロセスとしてアプリケーションを構築しています。 jQuery/AJAXを実行し、ノードJs/Expressにデータを受信して​​処理させる。私はそうのようなデータを送信していますjQueryの終わりに

<form action="/nodeRoute" method="post" id="myFormID"> 
<div class="input-group col-xs-4"> 
    <input type="text" class="form-control input-sm" name="field1[]" /> 
    <span class="input-group-addon">-</span> 
    <input type="text" class="form-control input-sm" name="field2[]" /> 
</div> 
</form> 

：

HTMLは、これらの入力グループ一連の下にある

$('#myFormID').submit(function(event) { 
    event.preventDefault(); 
    var formData = $('#myFormID').serializeArray(); 

    // Send AJAX request. 
    $.ajax({ 
     type: "POST", 
     url: "/nodeRoute", 
     data: JSON.stringify({formData}), 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function(data) { 
      console.log('Success'); 
     }, 
     failure: function(err) { 
      console.log("Failure", err); 
     } 
    }); 
}); 

ノード側では、私はrouter.use(bodyParser.json());を使用していますし、 console.log(req.body.formData);を出力します。私は何を得ることは以下の通りです：

[ { name: 'field1[]', value: '12' }, 
{ name: 'field1[]', value: '34' }, 
{ name: 'field2[]', value: '56' }, 
{ name: 'field2[]', value: '78' } ] 

私が望むどのようなものです：これは可能

[ { field1: [12,34], field2: [56,78] } ] 

ですか？

Answer 1

必要な形式でデータを構築するには、フォームの要素をループし、オブジェクト内のキーと値を設定して手動で行う必要があります。あなただけ$.ajaxのdataプロパティに結果のオブジェクトを提供することができ、そこから

var formData = {}; 
 
$('#myFormID .form-control').each(function() { 
 
    var fieldName = this.name.replace(/\[\]/g, ''); 
 
    if (!formData[fieldName]) 
 
    formData[fieldName] = [];  
 
    formData[fieldName].push(this.value); 
 
}); 
 

 
console.log(formData);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="/nodeRoute" method="post" id="myFormID"> 
 
    <div class="input-group col-xs-4"> 
 
    <input type="text" class="form-control input-sm" name="field1[]" value="12" /> 
 
    <span class="input-group-addon">-</span> 
 
    <input type="text" class="form-control input-sm" name="field2[]" value="34" /> 
 
    </div> 
 
    <div class="input-group col-xs-4"> 
 
    <input type="text" class="form-control input-sm" name="field1[]" value="56" /> 
 
    <span class="input-group-addon">-</span> 
 
    <input type="text" class="form-control input-sm" name="field2[]" value="78" /> 
 
    </div> 
 
</form>

：これを試してみてください。

// Send AJAX request. 
$.ajax({ 
    type: "POST", 
    url: "/nodeRoute", 
    data: formData, 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: function(data) { 
     console.log('Success'); 
    }, 
    failure: function(err) { 
     console.log("Failure", err); 
    } 
}); 

Answer 2

これは私がそれを行うだろうかです：：

// your node backend 
 

 
req.body.field.split(' '); // => [ 12, 32, ... ]

<!-- your html --> 
 

 
<input type="text" name="field">