1、安装
https://www.npmjs.com/package/form-serialize
2、使用
(1)、 引入form-serialize
插件。
(2)、调用serialize()
传入form
表单和配置选项。
(3)、配置:serialize(form表单,{hash:true})
说明:
hash:true
请求体为对象格式hash:false
请求体为key=value&key=value格式
3、实例
<form action="" method="post">
<input class="username" name="username" type="text" placeholder="请输入用户名"/>
<input class="food" name="food" type="text" placeholder="请输入喜欢的食物"/>
<input class="sign" name="sign" type="textarea" placeholder="请输入个性签名"/>
<input class="male" name="male" type="textarea" placeholder="请输入性别" />
<input class="male" name="age" type="textarea" placeholder="请输入年龄" />
<button type="submit">提交</button>
</form>
<script src="./form-serialize.js"></script>
<script>
document.querySelector("form").onsubmit = (e) => {
e.preventDefault();
const data = serialize(document.querySelector("form"), { hash: true });
console.log(data);
fetch('http://api.url',{
method: 'POST',//请求方法:post
headers:{
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
};
</script>