通过new FormData提交简单数据

通过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>
相关推荐
mCell4 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip4 小时前
Node.js 子进程:child_process
前端·javascript
excel7 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel8 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼10 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping10 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙10 小时前
[译] Composition in CSS
前端·css
白水清风11 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix11 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780011 小时前
new、原型和原型链浅析
前端·javascript