- <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>
来源: http://www.bubuko.com/infodetail-2518561.html