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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/2949.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！