console 命令行工具 X clear

console

function showmessage(){
let form=document.getElementById("oneform");
let form_data=new FormData(form);
console.log(form_data.get("username"));
let id=form_data.get("username");
if(id!="201721010166")
{alert("请重新输入学号！");}
let pw=form_data.get("密码");
if(pw=="")
{alert("请输入密码！");
document.getElementById("input_pwd").className="input_err";
return;
}
let sjh=form_data.get("sjh");
if(sjh.length!="11")
{alert("请输入正确的手机号！");}
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.szgch.net/wp-json/myapi/my-post'); 
xhr.onload = function(oEvent) {
if (xhr.status == 200) {
console.log("Uploaded!");
} else {
console.log("Error " + xhr.status + " occurred");
}
};
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
console.log("accepted:"+xhr.response);
obj = JSON.parse(xhr.response);
usetemplate(obj);
}
}

xhr.send(form_data);
}

function usetemplate(obj){
let lists=document.getElementById('items');
lists.innerHTML=`  
    <table border="1" align="center" cellpadding="10" width="800">
    <tr>
        <th colspan="7" bgcolor="#ff9999" >个人简介</th>
    </tr>
     
    <tr>
        <th bgcolor="#ff9999">姓名:</th>
        <td>${obj["username"]}</td>
        <th bgcolor="#ff9999">年龄:</th>
        <td>${obj["age"]}</td>
        <th bgcolor="#ff9999">民族:</th>
        <td>${obj["mz"]}</td>
        <td rowspan="3" width="100"<p><a href="http://www.imeitou.com/nvsheng/161140.html" />
    </a></p></td>
    </tr>
     
    <tr>
        <th bgcolor="#ff9999">出生日期:</th>
        <td>${obj["birthdate"]}</td>
        <th bgcolor="#ff9999">政治面貌:</th>
        <td>${obj["zzmm"]}</td>
        <th bgcolor="#ff9999">学历:</th>
        <td>${obj["xl"]}</td>
    </tr>
     
    <tr>
        <th bgcolor="#ff9999">专业:</th>
        <td>${obj["zy"]}</td>
        <th bgcolor="#ff9999">毕业学校:</th>
        <td>${obj["school"]}</td>
    <th bgcolor="#ff9999">籍贯:</th>
    <td>${obj["jg"]}</td>
</tr>
 
<tr>
     <th bgcolor="#ff9999">爱好:</th>
     <td>${obj["ah"]}</td>
     <th bgcolor="#ff9999">性别</th>
     <td>${obj["sex"]}</td>
         <th bgcolor="#ff9999">邮箱:</th>
         <td colspan="2">${obj["email"]}</a></p></td>
    </tr>
     

     
    <tr>
         <th height="160" bgcolor="#ff9999"> 自我介绍:</th>
         <td colspan="6">
        <p>${obj["zwjs"]}</p>
        <p></p>
        <p></p>
    </tr>
     
    <tr>
         <th height="160" bgcolor="#ff9999">总结:</th>
         <td colspan="6">
        <p>${obj["zj"]}</p>
        <p></p>
        <p></p>
    </tr>`; 
}

<html>
<body>
<h1>王嘉钰</h1>

<form id="oneform" action="http://www.szgch.net/wp-json/myapi/my-get" method="get">

<div><label>学号： </label><input type="text" name="username"></div>
<div><label>密 码: </label><input id="input_pwd" type="password" name="密码"></div>
<div><label>性别：</label><input type="radio" checked="checked" name="Sex" value="male" /><label>男</label>
<input type="radio" name="sex" value="female" /><label>女</label></div>
<div><label>出生日期：</label><input name="birthdate" type="datetime-local"></div> 
<div><label>年龄： </label><input type="text" name="age"></div>
<div><label>手机号:</label><input type="sjh" name="sjh"></div>
<div><label>民族： </label><input type="text" name="mz"></div>
<div><label>邮箱： </label><input type="text" name="email"></div>
<div><label>专业： </label><input type="text" name="zy"></div>
<div><label>学历： </label><input type="text" name="xl"></div>
<div><label>政治面貌： </label><input type="text" name="zzmm"></div>
<div><label>学校： </label><input type="text" name="school"></div>
<div><label>籍贯： </label><input type="text" name="jg"></div>
<div><label>总结： </label><input type="text" name="zj"></div>
<div><label>爱好： </label><input type="text" name="ah"></div>
<div><label>自我介绍： </label><input type="text" name="zwjs"></div>

<button type="button" onclick="showmessage()">submit</button>
</form>
<div style="height:20px;"></div>
<h2>内容浏览</h2>
<div id="cview">
<ul id="items" ></ul>
</div>
</body>
</html>

.input_err{
background-color: red;
}
.wjy{
font-size:20px;
color:brown; 
background-color:  hotpink}