用到的知识点
原生ajax的各个属性（ajax的使用步骤）
form 可以通过打点的方式找到form里面的所有dom节点,通过
表单dom对象.name,(name是标签里面的属性) 可以获取指定的表单元素 比如要找username这个输入框console.log(form.username);
ajax请求接口如果是post请求需要携带参数，那么需要设置
携带的参数以及请求头：
const data =
username=${username.value}&password=${password.value};
xhr.send(data);
怎么查看携带的参数有没有传递成功？
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form
id="login"
action="https://www.baidu.com/login"
method="POST"
enctype="multipart/form-data"
>
<input type="text" name="username" placeholder="用户名" />
<input type="password" name="password" placeholder="密码" />
<input id="submit" type="submit" value="登录" />
</form>
</body>
<script>
const url = "https://www.baidu.com/login";
// 通过form表单找dom节点
const form = document.getElementById("login");
// 找form里面的input框
// form 可以通过打点的方式找到form里面的所有dom节点
// 通过`表单dom对象.name`,(name是标签里面的属性) 可以获取指定的表单元素
// 比如要找username这个输入框
// console.log(form.username);
// 也就可以通过结构赋值的方式获得我们需要的节点
const { username, password } = form;
console.log(username);
console.log(password);
const button = document.getElementById("submit");
button.addEventListener("click", (e) => {
// 阻止表单默认提交事件
e.preventDefault();
// 编写ajax 用onload或者onreadystatechange
const xhr = new XMLHttpRequest();
xhr.addEventListener("load", () => {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
console.log(xhr.responseText);
}
});
// 设置请求头参数
const data = `username=${username.value}&password=${password.value}`;
// 准备发送
xhr.open("post", url, true);
// 设置请求头
// 请求头中的 Content-Type 字段用来告诉服务器，浏览器发送的数据是什么格式的
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 发送，带参数发送
xhr.send(data);
});
</script>
</html>
