点击登录后,ajax携带的参数传递如下:
步骤
点击button按钮,先阻止默认事件。
编写原生ajax,open里面参数设置为(“post”,url,true)
ajax里面的参数是input框的值,input框太多,不能使用模板字符串拼接,使用FormData的方式,获取到form里面input框的值
const data =new Form(data)可以用循环遍历的的方式查看data里面是input的值,里面是数组的形式
使用FormData获取携带的参数,就不用在ajax里面设置请求头了。
点击提交以后,在浏览器的network里面可以看到ajax携带的参数
<form
id="login"
action="https://www.baidu.com/login"
method="POST"
enctype="multipart/form-data"
>
<input type="text" name="username" placeholder="用户名" />
<input type="text" name="height" placeholder="身高" />
<input type="text" name="age" placeholder="年龄" />
<input type="text" name="sex" placeholder="性别" />
<input type=" password" name="password" placeholder="密码" />
<input id="submit" type="submit" value="登录" />
</form>
<script>
const url = "https://www.baidu.com/login";
// 使用form表单找到下面的input框
const form = document.getElementById("login");
// 清除form的默认提交事件
const button = document.getElementById("submit");
button.addEventListener("click", (e) => {
e.preventDefault();
// 点击button的时候,ajax携带参数请求数据
// 编写ajax
const xhr = new XMLHttpRequest();
// 使用onreadystatechange
xhr.addEventListener("load", () => {
// status
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
console.log("请求响应成功");
console.log(xhr.responseText);
}
});
// 使用FormData获取data
const data = new FormData(form);
// 使用append追加数据
data.append("adress", "beijing");
data.append("hobby", "打球");
// 准备open
xhr.open("post", url, true);
// 发送,data就是input框里面的所有内容
xhr.send(data);
});
</script>