console
function showmessage(){
let form=document.getElementById("oneform");
let form_data=new FormData(form);
console.log(form_data.get("name"));
let pw=form_data.get("password");
if(pw=="")
{ alert("请输入密码！");
document.getElementById("input_pwd").className="input_err";
return;
}
let id=form_data.get("number");
if(id!="201721010177")
{alert("请输入正确学号！");}
var num=document.getElementById("phone").value;
if(num.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);
showcontent(obj);
}
}
xhr.send(form_data);
}
function showcontent(obj){
let lists=document.getElementById('items');
lists.innerHTML=`<table border="1">
<tr>
<th> <img class="photo" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607049237107&di=aed0e206f48aa9efafdf315634737a25&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F18%2F01%2F23%2F4a8e41bb52e38bf5e48900600e55534e.jpg"/> </th>
<tr>
<th>昵称:</th>
<td>${obj["name"]}</td>
</tr>
<tr>
<th bgcolor="red">密码:</th>
<td>${obj["password"]}</td>
</tr>
<tr>
<th>学号:</th>
<td>${obj["number"]}</td>
</tr>
<tr>
<th>电话:</th>
<td>${obj["phone"]}</td>
</tr>
<tr>
<th>性别:</th>
<td>${obj["gendera"]||''}${obj["genderb"]||''}</td>
</tr>
<tr>
<th>出身日期:</th>
<td>${obj["birthdate"]}</td>
</tr>
<tr>
<th>政治面貌:</th>
<td>${obj["poli"]}</td>
</tr>
<tr>
<th>1:</th>
<td>${obj["like"]}</td>
</tr>
<tr>
<th>2:</th>
<td>${obj["text"]}</td>
</tr>
<tr>
<th>3:</th>
<td>${obj["color"]}</td>
</tr>`;
}
<html>
<body>
<h2>毛越</h2>
<div>
<form action="http://www.szgch.net/wp-json/myapi/my-post" method="post">
<table width="100%" border="1" cellspacing="1" cellpadding="1">
<tr>
<td><input name="file0" type="file" id="file0" /><input name="button0" type="submit" id="button0" value="上传文件" />
</td>
</tr>
</table>
</form>
</div>
<form action="http://www.szgch.net/wp-json/myapi/my-get" method="get" enctype="multipart/form-data" id="oneform">
<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr>
<td><label>
昵称
<input type="text" name="name" id="name" /></label>
</td>
<td><label>
密码
<input name="password" type="password" id="input_pwd" maxlength="16" /></label>
</td>
</tr>
<tr>
<td><label>
学号
<input type="text" name="number" id="number" /></label>
</td>
<td><label>
电话
<input name="phone" type="text" id="phone" maxlength="11" /></label>
</td>
</tr>
<tr>
<td><label>
性别
<input type="radio" name="gendera" id="sex" value="male" />男
<input type="radio" name="genderb" id="sex2" value="female" />女
</label>
</td>
<td><label>
出生日期
<input name="birthdate" type="datetime-local"></label>
</td>
<td><label>
政治面貌
<select name="poli" id="poli">
<option value="无" selected="selected"></option>
<option value="团员">团员</option>
<option value="党员">党员</option>
</select>
</label>
</td>
</tr>
<tr>
<td colspan="3">1、下列文人最喜欢哪位？</td>
</tr>
<tr>
<td colspan="3">
<label>
<input type="checkbox" name="like" value="SongYu" id="like_0" />
宋玉</label>
<label>
<input type="checkbox" name="like" value="QuYuan" id="like_1" />
屈原</label>
<label>
<input type="checkbox" name="like" value="LiBai" id="like_2" />
李白</label>
<label>
<input type="checkbox" name="like" value="DuMu" id="like_3" />
杜牧</label>
<label>
<input type="checkbox" name="like" value="SuShi" id="like_4" />
苏轼</label>
</td>
</tr>
<tr>
<td colspan="3">2、默写九辩。</td>
</tr>
<tr>
<td colspan="3"><textarea name="text" id="text" cols="45" rows="5"></textarea></td>
</tr>
<tr>
<td colspan="3">3、选择喜欢的颜色。</td>
</tr>
<tr>
<td colspan="3"><input type="color" name="color"></td>
</tr>
</table>
<button type="button" onclick="showmessage()">提交</button>
</form>
<div style="height:20px;"></div>
<h2>内容浏览</h2>
<div id="cview">
<ul id="items" ></ul>
<table id="tableone"></table>
</div>
</body>
</html>
.input_err{
background-color: red;
}
.title{
background-color:rgba(205, 240, 176, 0.712);
font-size:22px;
color:rgba(235, 95, 30, 0.87);
border:solid 2px rgba(253, 189, 13, 0.692);
}
c_name{
color: rgba(234, 0, 255, 0.801);
}
.content{
color: rgba(37, 212, 14, 0.74);
text-align: center;
font-size:30px;
position : top;
font-style:itelic;
}
li:first-child{
background-color:rgba(243, 245, 130, 0.685);
border-style: dotted;
border-width:2px;
border-color:rgba(49, 225, 238, 0.685);
}
li:nth-child{
background-color:rgba(243, 245, 130, 0.685);
border-style: dotted;
border-width:2px;
border-color:rgba(49, 225, 238, 0.685);
}
ul:first-child {
background-color:rgb(248, 250, 127);
border-style: ridge;
border-width:3px;
border-color:rgba(49, 225, 238, 0.685);}