将 HTML 表单数据放入 JSON 对象并进行 AJAX POST 调用
Posted
技术标签:
【中文标题】将 HTML 表单数据放入 JSON 对象并进行 AJAX POST 调用【英文标题】：Put HTML form data in JSON object and make AJAX POST call 【发布时间】：2018-06-30 13:40:50 【问题描述】：我有以下 html 代码：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<table>
<tr>
<td><label>Brand:<input type="text" name="brand" size="5" required></label></td>
<td><label>Model:<input type="text" name="model" size="5" required></label></td>
<td><label>OS:<input type="text" name="os" size="5" required></label></td>
<td><label>Image link:<input type="text" name="image" size="5" required></label></td>
<td><label>Screensize:<input type="text" name="screensize" size="5" required></label></td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
</body>
</html>
我想知道如何将这个 HTML 表单的数据放入 JSON 对象并进行 AJAX POST 调用？
【问题讨论】：
【参考方案1】：首先，使用serializeArray 将表单元素编码为名称和值的数组。
然后用 Ajax 请求发送。
HTML：
<form>
<table>
<tr>
<td><label>Brand:<input type="text" name="brand" size="5" required></label></td>
<td><label>Model:<input type="text" name="model" size="5" required></label></td>
<td><label>OS:<input type="text" name="os" size="5" required></label></td>
<td><label>Image link:<input type="text" name="image" size="5" required></label></td>
<td><label>Screensize:<input type="text" name="screensize" size="5" required></label></td>
</tr>
</table>
</form>
<button onclick="submitForm();">Submit JSON</button>
JS：
function submitForm()
$.ajax(
method: "POST",
url: "some.php",
data: JSON.stringify($("form").serializeArray())
);
【讨论】：
以上是关于将 HTML 表单数据放入 JSON 对象并进行 AJAX POST 调用的主要内容，如果未能解决你的问题，请参考以下文章
解析 JSON 对象时出现 NoClassDefFoundError JsonAutoDetect