总体效果：能够输入用户名与密码能够进行登录操作并反馈数据。
一.代码：
<!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>
<style>
* {
border-width: 1px;
border-radius: 6px;
}
body {
/* position: fixed; */
width: 100%;
height: 100%;
min-width: 1000px;
z-index: -10;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
}
.logo {
position: auto;
right: 10%;
}
.bdy {
/* position:fixed;
background-color: aliceblue;
width: 1000px;
height: 750px;
margin-left:300px ;
margin-bottom:100px; */
background-color: aliceblue;
width: 60%;
height: 80%;
/* ** */
position: fixed;
left: 20%;
}
.text {
width: 420px;
height: 1010px;
padding-left: 2em;
vertical-align: top;
}
a {
color: #337AB7;
text-decoration: none;
}
#innerbox {
display: inline-block;
padding: 0 10px;
border: 0;
margin: 0 10px;
}
#innerbox3 {
display: inline-block;
padding: 0 10px;
border: 0;
margin: 0 10px;
}
/* .innerbox div {
display: inline-block;
} */
input {
display: inline-block;
height: 30px;
width: 300px;
}
#select {
margin: 0;
display: inline-block;
width: 80px;
height: 25px;
border: 1px solid #000;
padding: 3px;
background-color: rgb(238, 238, 238);
}
#login {
display: inline-block;
height: 30px;
width: 190px;
color: white;
text-align: center;
line-height: 30px;
background-color: #337AB7;
}
#sever {
margin-left: 30px;
display: inline-block;
height: 30px;
width: 190px;
color: white;
text-align: center;
line-height: 30px;
background-color: #5CB85C;
}
li {
float: left;
list-style: none;
margin: 5px;
}
#last {
text-align: center;
padding-top: 80px;
padding-left: 50px;
padding-right: 50px;
height: 300px;
}
/*登录后的样式*/
.demo{
margin-top:10px;
}
</style>
</head>
<body>
<div class="logo"><img src="images/logo.png" alt=""></div>
<div class="bdy">
<div class="text" id="innerbox">
<h2>通知</h2>
<h3>常用服务入口</h3>
<p>宿舍网访问图书资源参考：南昌大学师生在校外使用图书馆电子资源的指南 <a href="#">请点击此处查看</a> </p>
<p>忘记密码可以点击：</a>(修改密码后请等待5分钟)</p>
<P>修改个人信息、密码请点击：<a href="#">此处进行操作</a></P>
<P>自主设备下线点击“自助服务”按钮，也可点击<a href="#">此处进行操作</a></p>
<P>各运营商业务咨询电话。</P>
<P>移动业务咨询 13870052190</P>
<P>联通业务咨询 18679184429</P>
<P>各运营商服务电话，服务电话仅受理宿舍区域使用问题.</P>
<P>前湖校区移动 18807088905 (9:00-20:00)</P>
<P>东湖校区移动 13576074067 (9:00-19:00)</P>
<P>青山湖校区移动 15083836931</P>
<P>联通 15579181265 (9:00-20:00)</P>
<P>电信无线 19979051829 (9:00-20:00)</P>
<P>电信有线 86510000</P>
</div>
<div class="middle" id="innerbox">
<img src="images/middle.png" alt="">
</div>
<div class="text" id="innerbox3">
<h1 align="center">账 号 认 证</h1>
<div>
<input type="text" placeholder="请输入用户名" id="username">
<div id="select">
<select>
<option>请选择</option>
<option>电信</option>
</select>
</div>
</div><br>
<div>
<input style="width:400px" placeholder="请输入密码" id="password"></input>
</div><br>
<div><span id="login">登录</span>
<span id="sever">自助服务</span><br>
<div id="last">
<li><a href="#">Windows |</a></li>
<li><a href="#">Android |</a></li>
<li><a href="#">iPhone |</a></li>
<li><a href="#">English</a></li>
</div>
</div>
</div>
</div>
<script>
//获取元素
var login = document.getElementById('login');
var box3=document.querySelector('#innerbox3');
//添加事件
login.onclick = function () {
var xhr = new XMLHttpRequest();
//模拟输入账号密码
var nameValue = document.getElementById('username').value;
var password = document.getElementById('password').value;
// var nameValue = 'newmedia';
// var password = 'learnTolearn';
var params = 'username=' + nameValue + '&password=' + password;
xhr.open('post', 'http://api.jdysya.top/newMedia/loginPlain');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(params);
//获得全部数据后的处理操作
xhr.onload = function () {
// console.log(xhr.responseText);
var responseText = JSON.parse(xhr.responseText);
console.log(responseText);
console.log(box3);
box3.innerHTML = '<h1 align="center">' + '网 络 准 入 认 证 系 统' + "</h1>"+'<div class="demo">'+'用户名：'+ responseText.data.username+'</div>'+'<div class="demo">'+'已用流量:'+responseText.data.usedFlow+'M</div>'+'<div class="demo">'+'已用时长:'+responseText.data.period+'S</div>'+'<div class="demo">'+'账户余额：'+responseText.data.balance+"￥</div>"+'<div class="demo">'+'IP地址:'+responseText.data.ip+'</div>'+'<br>'+'<div>'+'<span id="login">'+'注销'+"</span>"+'<span id=sever>'+'自助服务'+'</span>'+'</div>'+'<div id=last>'+'<li><a href="#">'+'Windows |'+'</a></li>'+'<li><a href="#">'+'Android |'+'</a></li>'+'<li><a href="#">'+'iPhone |'+'</a></li>'+'<li><a href="#">'+'English'+'</a></li>';
}
}
</script>
</body>
</html>
二.这里写一下在写代码过程中遇到的一些bug：
获取数据的过程中：
- 文档未定义（翻译过之后），一般都是document单词写错了,写成doucment
2.不能查询到某个属性（翻译之后）
一般都是由于在获取元素的时候出错了，可以在浏览器点击查询到具体位置，具体检查单词的错误。
***tip:在使用vscode书写js代码的时候一般都会有提示，如果没有提示的时候就小心注意，极有可能是写错误了。
- 无法将JSON字符串转化为JSON对象：
看一下浏览器检查元素那边如何报错：
这个属性为NULL,检查一下具体元素那边是否有这个属性，比如id；
tip：重点检查获取元素代码：最简单，但也最容易出错
- 在使用innerHTML时发现执行操作后界面无变化：
利用类型获取元素，但是有多个元素都有这个类名，此时会发生冲突。