form-axios提交数据
form-axios提交数据
<body>
<h2>ajax+form</h2>
<!--
action 提交的接口地址
method 提交的方法
-->
<form action="http://ajax-api.itheima.net/api/data" method="post">
<!-- name 提交到服务器数据的 key -->
<input
class="username"
name="username"
type="text"
placeholder="请输入用户名"
/>
<br />
<input
class="food"
name="food"
type="text"
placeholder="请输入喜欢的食物"
/>
<br />
<input
class="sign"
name="sign"
type="textarea"
placeholder="请输入个性签名"
/>
<br />
<input
class="male"
name="male"
type="textarea"
placeholder="请输入性别"
/>
<br />
<button type="submit">提交</button>
</form>
<script src="./lib/axios.js"></script>
<script>
// form-axios提交数据
document.querySelector("form").addEventListener("submit", (e) => {
e.preventDefault();
axios({
method: "post",
url: "http://ajax-api.itheima.net/api/data",
data: {
username: document.querySelector(".username").value,
food: document.querySelector(".food").value,
sign: document.querySelector(".sign").value,
male: document.querySelector(".male").value,
},
}).then((res) => {
console.log(res);
});
});
</script>
</body>
