通过new FormData提交简单数据

- 效果示例图
- 代码
效果示例图

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
				box-sizing: border-box;
			}

			input,
			input:focus {
				border-radius: 4px;
				outline: none;
				padding: 0px 12px;
			}

			input::placeholder,
			input::-moz-placeholder,
			input::-webkit-input-placeholder {
				color: #999;
			}

			.form-wrap {
				width: 600px;
				margin: 12px auto;
			}

			.form-item {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 12px;
			}

			.form-item-label {
				width: 100px;
			}

			.form-item-content {
				--width: 100px;
				width: calc(100% - var(--width));
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.form-item-content input[type='text'] {
				border: 1px solid #dcdcdc;
				width: 100%;
				height: 40px;
			}

			.form-item-content input[type='radio'] {
				border: 1px solid #dcdcdc;
				width: 20px;
				height: 20px;
				margin-left: 12px;
				cursor: pointer;
			}

			.form-item-content label {
				margin-left: 12px;
			}

			.form-footer {
				width: 100%;
				display: flex;
				flex-direction: row;
				padding-left: 100px;
			}

			.form-btn {
				border: 1px solid #00a2ef;
				border-radius: 8px;
				width: 100px;
				height: 40px;
				margin-right: 12px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<form class="form-wrap" id="myForm" name="myForm">
			<div class="form-item">
				<label class="form-item-label">姓名:</label>
				<div class="form-item-content">
					<input type="text" name="username" value="" />
				</div>
			</div>
			<div class="form-item">
				<label class="form-item-label">年龄:</label>
				<div class="form-item-content">
					<input type="text" name="userAge" value="" />
				</div>
			</div>
			<div class="form-item">
				<label class="form-item-label">性别:</label>
				<div class="form-item-content">
					<label for="woman">女</label>
					<input id="woman" type="radio" name="userSex" value="0" />
					<label for="man">男</label>
					<input id="man" type="radio" name="userSex" value="1" />
				</div>
			</div>
			<div class="form-item">
				<label class="form-item-label">孩子one:</label>
				<div class="form-item-content">
					<input type="text" name="children[0][name]" value="" />
				</div>
			</div>
			<div class="form-item">
				<label class="form-item-label">年龄one:</label>
				<div class="form-item-content">
					<input type="text" name="children[0][age]" value="" />
				</div>
			</div>
			<div class="form-item">
				<label class="form-item-label">孩子two:</label>
				<div class="form-item-content">
					<input type="text" name="children[1][name]" value="" />
				</div>
			</div>
			<div class="form-item">
				<label class="form-item-label">年龄two:</label>
				<div class="form-item-content">
					<input type="text" name="children[1][age]" value="" />
				</div>
			</div>

			<div class="form-footer">
				<button class="form-btn" type="reset">重置</button>
				<button class="form-btn" id="submitBtn">提交</button>
			</div>
		</form>

	</body>
	<script type="text/javascript">
		document.querySelector("#submitBtn").addEventListener("click", (e) => {
			//阻止事件向上冒泡
			e.preventDefault();
			const myForm = document.querySelector("#myForm");
			const formData = new FormData(myForm);
			const formJson = Object.fromEntries(formData.entries());
			console.log("[]", formJson)
		})
	</script>
</html>