# 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("登錄不成功，用戶名或者密碼錯誤"); } }) } ```