接收陣列形式的數據作爲JSON的jQuery發送和接收節點的js

我與節點的js玩弄和我一直在建立一個應用程序作爲一個學習的過程，在這個程序，我想通過從HTML表單發送數據jQuery/AJAX並讓Node Js/Express接收和處理數據。接收陣列形式的數據作爲JSON的jQuery發送和接收節點的js

HTML低於用一系列這些輸入信號組的：

<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>

在jQuery的端我送像這樣的數據：

$('#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] } ]

這可能嗎？

來源

2017-03-03 Graham Solomon

什麼是你的HTML是什麼樣子？ – ChrisG

我已修改原始帖子以包含正在使用的表單的示例。 –

發送數據的格式是什麼？我的意思是請求數據看起來如何？ –

要你需要，你需要手動通過表單的元素循環和對象設置鍵值，以做到這一點的格式構建數據。試試這個：

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>

從那裏，你可以只提供所產生的對象的$.ajax的data財產。你並不需要字符串化作爲jQuery將做到這一點對你：

// 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); 
    } 
});

來源

2017-03-03 14:49:02

謝謝，我希望有一些內置的東西可以讓我獲得這種格式的數據，但是你的代碼段已經工作了。 –

不幸的是，不像serializeArray（）爲每個輸入元素構建一個對象，它不會將它們分組在一起。樂意效勞 –

-1

這是我會怎麼做：

// your node backend 
 

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

<!-- your html --> 
 

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

來源

2017-03-03 14:53:00

接收陣列形式的數據作爲JSON的jQuery發送和接收節點的js

回答

相關問題