# post请求 <br> ``` <form> 用户名：<input type="text" name="username" id="username"><br><br> 密&emsp;码：<input type="password" name="password" id="password"><br><br> <input type="button" value="登录" id="btn"> </form> <div id="bb"></div> <script> // <!--post请求--> // 获取元素 let btnObj = document.getElementById("btn"); let bObj = document.getElementById("bb"); btnObj.onclick = () => { //获取用户填写的用户名和密码 let username = document.getElementById("username").value; let password = document.getElementById("password").value; // 拼接请求头 username=${username}&password=${password}中间不能有空格 let params = `username=${username}&password=${password}`; // 1.创建ajax对象 let ajax = new XMLHttpRequest(); // 路径跟方式 ajax.open("POST", "login_post"); // post请求，要设置请求头enctype // enctype="application/x-www-form-urlencoded" 设置成请求头。 ajax.setRequestHeader("enctype", "application/x-www-form-urlencoded"); // 3.绑定监听状态改变的处理函数，在处理函数中可获取响应函数 ajax.onreadystatechange = () => { // 当状态码等于200同属ajax对象的状态为4时才可以获取到服务器响应的数据 if (ajax.status === 200 && ajax.readyState === 4) { //服务器响应过来的数据 console.log(ajax.responseText); bObj.innerText = ajax.responseText } }; // 避免缓存问题 ajax.setRequestHeader('Cache-Control', 'no-cache'); // 4.发送请求 ajax.send(params); } </script> ``` ***** **服务端代码** ``` //写死数据，在没有数据存在的情况下 let uname = "yst"; let upwd = "123456"; if(requestUrl==="/login_post"){ request.on('data',(postData)=>{ //获取传过来的用户填写的用户名和密码 console.log(postData.toString()); let pDataArr = postData.toString().split("&"); let username = pDataArr[0].split("=")[1]; let password = pDataArr[1].split("=")[1]; response.setHeader("Content-type","text/html;charset=utf-8"); //校验用户名和密码是否正确， 最终响应登录成功，登陆失败 if(username===uname && password===upwd){ response.end("登录成功"); }else{ response.end("登录不成功，用户名或者密码错误"); } }) } ```