如何序列化一个简单的 HTML 表单内容？答案

【问题标题】：how to serialize a simple HTML form contents?如何序列化一个简单的 HTML 表单内容？
【发布时间】：2018-12-04 15:25:04
【问题描述】：

我需要在由下拉列表和文本框组成的表单中序列化数据（使用 JQuery）。数据应该存储在一个对象中以供其他功能使用。请帮帮我

【问题讨论】：

请edit 提出您的问题，并在minimal reproducible example 中说明您的表单外观以及到目前为止您使用jQuery 所做的尝试。
$("#form-id").serialize()
serializing and submitting a form with jQuery POST and php的可能重复

标签： jquery html forms

【解决方案1】：

我使用 Jquery 抓取表单元素，然后使用 .serialized 方法序列化数据，这些数据将存储在名为 data 的 javascript 变量中。您可以将数据用于其他功能。有关序列化方法的更多信息：https://api.jquery.com/serialize/

$(document).ready(function () {
$('#myButton').on('click', submitTheForm);
});
function submitTheForm() {
var formData = $('#myForm').serialize();
var data = decodeURIComponent(formData);
alert('serialized data: ' + data)
$('#myForm').submit();
}

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
</head>
<body>
<form id="myForm">
Select a product:
  <select name="favoriteCar">
<option>Apple</option>
<option value="Chevy">Orange</option>
<option>Banana</option>
</select><br />
Comment:
<input type="text" name="comment" />
</form>
<button id="myButton">order product</button>
</body>
</html>

【讨论】：