<body> <form method="post" action="login"> 用户名：<input id="user" type="text" name="username"> 密码：<input id="pwd" type="password" name="password"> <input type="checkbox" id="auto" name="auto" value="1"/>七天免登录 <input type="button" onclick="SubmitForm();" value="登录"> <span class="err"></span> </form> </body> </html> <script> var xhr=null; function SubmitForm(){ var username=document.getElementById("user").value; var pwd=document.getElementById(‘pwd‘).value; var chkEle=document.getElementById(‘auto‘); var chk=null; if(chkEle.checked==true) chk=1; else chk=0; xhr=new XMLHttpRequest(); /*参数 发送方式 发送地址 是否异步*/ //xhr.open(‘GET‘,"/login",true); xhr.open("POST","/login",true); //当readystate值改变时会自动去触发对应函数，先对这个值进行判断，在决定对应的函数 //0.未初始化，尚未调用open //1.启动，调用了open未调用send //2.发送，调用了send,未收到响应 //3.接收，已经接收到了部分响应消息 //4.完成，已经接收到所有的数据 xhr.onreadystatechange =func; //setRequestHeader(String header,String value)设置请求头 //getAllResponseHeaders()获取所有响应头 //getResponseHeader(String header)获取响应头中指定的header的值 //void abort()终止请求 //post发送数据需要设置请求头 xhr.setRequestHeader(‘content-type‘,‘application/x-www-form-urlencoded‘) //用于发送数据 xhr.send(‘username=‘+username+‘;password=‘+pwd+‘;auto=‘+chk); //String responseText 服务器返回的数据字符串类型 //XmlDocument responseXML 服务器返回的数据（xml对象） //Number states 状态码 //String statesText 状态码对应文本 } function func(){ if(xhr.readyState == 4){ console.log(xhr.responseText); var data=xhr.responseText; var ret_dict = JSON.parse(data); if(ret_dict.status){ //登录成功 }else{ //登录失败 var ele=document.getElementsByClassName(‘err‘)[0]; ele.innerHTML="<h1 style=\"color:red;\">"+ret_dict.message+"</h1>" } } } </script>
