アヤックスのないJSON値

私は4つの異なる値を集める単純なHTMLフォームを持っています。収集したデータをJSON形式のAPIサーバーに投稿したいと思います。アヤックスのないJSON値

<body> 
 
<h2>Form</h2> 
 

 
<form action="/endpoints" method="post" onsubmit="return profile();"> 
 

 
MAC Address:<input type="text" id="mac" name="mac" size="12"/> 
 

 
<br/>Select Catagory:<br/> 
 
<select name="catagory" id="catagory"> 
 
<option value="SmartDevice">SmartDevice</option> 
 
<option value="Printer">Printer</option> 
 
<option value="Printer">Printer</option> 
 
</select> 
 
<br/>Select Family:<br/> 
 
<select name="family" id="family"> 
 
<option value="Android">Android</option> 
 
<option value="Ricoh">Ricoh</option> 
 
<option value="Canon">Canon</option> 
 
</select> 
 
<br/>Name:<br/> 
 
<select name="name" id="name"> 
 
<option value="Android">Android</option> 
 
<option value="Ricoh Multifunction Printer">Ricoh Multifunction Printer</option> 
 
<option value="Canon Printer">Canon Printer</option> 
 
</select> 
 

 

 
<input type="submit" style="width: 200px;" id="submit" onclick="return profile();"> 
 

 
<script type="text/javascript"> 
 
{literal} 
 
function profile(){ 
 
var addr = document.getElementsByName("mac")[0].value; 
 
var str_array = addr.split(','); 
 
var nam = document.getElementsByName("name")[0].value; 
 
var famil = document.getElementsByName("family")[0].value; 
 
var catagor = document.getElementsByName("catagory")[0].value; 
 
for(var i = 0; i < str_array.length; i++) { 
 
    str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, ""); 
 
    var output = '[' + JSON.stringify({mac: str_array[i], device: {category: catagor, family: famil, name: nam}}) + ']'; 
 
}; 
 
return output; 
 
} 
 
{/literal} 
 
</script> 
 
</form> 
 
</body>

私は、プロファイル（呼び出した場合、希望JSON出力を得ることができています）。コンソールでしかし、投稿されたデータはすべての値が1行で異なります。

は私がポストデータのようなことを期待：

[{"mac": "aabbccddeeff", "device": {"category": "Printer", "family": "Xerox", "name": "Xerox WorkCenter"}}, 
 
{"mac": "bbccddeeffaa", "device": {"category": "Printer", "family": "Xerox", "name": "Xerox WorkCenter"}}, 
 
{"mac": "ccddeeffaabb", "device": {"category": "Printer", "family": "Xerox", "name": "Xerox WorkCenter"}}]'

私を助けて、私は初心者ですしてください。 :-)

出典

2016-06-23 user1564173

私がprofile（）を呼び出すときにノートが追加されました。最後のMacのみを表示し、完全なMacは表示しません。 – user1564173

投稿データを 'onsubmit'で変更することはできません。あなたはAJAXか何かを使う必要があります。 – Louy

この場合、あなたはあなたのスクリプトにjsonを構築してから、このjsonをいくつかの隠しフィールドに挿入することを提案します。 – genichm