javascript - 不使用 ajax 发布 JSON 值

标签 javascript json

我有一个简单的 HTML 表单,它收集四个不同的值。我想将收集到的数据以 JSON 格式发布到 API 服务器。

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

如果我调用 profile() ,我就可以获得所需的 JSON 输出;在控制台中。但发布的数据与单行中的所有值不同。

我希望发布数据如下:

[{"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"}}]'

请帮助我,我是新手。 :-)

最佳答案

首先构造一个输出,它是一个数组。然后使用 JSON.strigify 将其转换为 JSON blob,该 blob 将成为 ajax 调用的一部分。

此外,您无法返回作为表单元素一部分的已修改数据,您需要从 JS 进行显式 ajax 调用。

关于javascript - 不使用 ajax 发布 JSON 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38000235/

相关文章:

javascript - 更新 Div 添加文本、评论功能

javascript - 递归搜索 JSON 字符串字典,查找键值对在 "name"中的所有值

java - 如何将 Multiple 数组转换为 Json 数组并将 Json 添加到 hashmap

iphone - 在 iOS 5 项目中放置 JSON 解析代码的合适位置在哪里?

javascript - 添加 iPhone OS 事件的 jQuery 样式事件处理程序

javascript - 给定一个字符串 S,返回 "reversed"字符串,其中所有不是字母的字符都保持在同一个位置,并且所有字母反转它们的位置

javascript - 使用 moment.js 防止 DST 偏移以处理重复发生的事件

javascript - 如何避免在 React 片段中断行

javascript - 将存储在本地主机上的 GeoJSON 文件加载到 google maps javascript sdk

iphone - JSON 值未保存到 iPhone 中的 SQLite 数据库