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" align="center" width="620">
<tr>
<th colspan="5" bgcolor="yellow" >问卷调查</th>
</tr>
<tr>
<td width="100" bgcolor="greenyellow">昵称:</td>
<td width="150">${obj["name"]}</td>
<td width="100" bgcolor="greenyellow">性别:</td>
<td width="150">${obj["gendera"]||''}${obj["genderb"]||''}</td>
<td width="120" rowspan="9" align="center" valign="middle">
<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"/></td>
</tr>
<tr>
<td width="100" bgcolor="greenyellow">学号:</td>
<td width="150">${obj["number"]}</td>
<td width="100" bgcolor="greenyellow">电话:</td>
<td width="150">${obj["phone"]}</td>
</tr>
<tr>
<td width="100" bgcolor="greenyellow">出身日期:</td>
<td width="150">${obj["birthdate"]}</td>
<td width="100" bgcolor="greenyellow">政治面貌:</td>
<td width="150">${obj["poli"]}</td>
</tr>
<tr>
<td width="100" colspan="4" bgcolor="greenyellow">1、下列文人最喜欢哪位？</td>
</tr>
<tr>
<td width="100" height="25" colspan="4">${obj["like"]}</td>
</tr>
<tr>
<td width="100" colspan="4" bgcolor="greenyellow">2、默写九辩。</td>
</tr>
<tr>
<td width="100" height="25" colspan="4">${obj["text"]}</td>
</tr>
<tr>
<td width="100" height="25" colspan="4" bgcolor="greenyellow">3、选择喜欢的颜色。</td>
</tr>
<tr>
<td width="100" height="25" colspan="4">${obj["color"]}</td>
</tr>`;
}
<html>
<body>
<h2>毛越</h2>
<form action="http://www.szgch.net/wp-json/myapi/my-get" method="get" enctype="multipart/form-data" id="oneform">
<div><label>昵称：</label><input type="text" name="name" id="name" /></div>
<div><label>密码：</label><input name="password" type="password" id="input_pwd" maxlength="16" /></div>
<div><label>学号：</label><input type="text" name="number" id="number" /></div>
<div><label>电话：</label><input name="phone" type="text" id="phone" maxlength="11" /></div>
<div><label>性别：</label><input type="radio" name="gendera" id="sex" value="男" />男
<input type="radio" name="genderb" id="sex2" value="女" />女</div>
<div><label>出生日期：</label><input name="birthdate" type="datetime-local"></div>
<div><label>政治面貌：</label><select name="poli" id="poli">
<option value="无" selected="selected"></option>
<option value="团员">团员</option>
<option value="党员">党员</option>
</select></div>
<div>1、下列文人最喜欢哪位？</div>
<div><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></div>
<div>2、默写九辩。</div>
<div><textarea name="text" id="text" cols="45" rows="5"></textarea></div>
<div>3、选择喜欢的颜色。</div>
<div><input type="color" name="color"></div>
<button type="button" onclick="showmessage()">提交</button>
</form>
<div style="height:20px;"></div>
<h2>内容浏览</h2>
<div id="cview">
<ul id="items" ></ul>
</div>
</body>
</html>
.input_err{
background-color: red;
}
.photo{
float: center;
width: 100px;
height: 100px;
}
body{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
div{
margin: 2px;
}
.outside{
border: solid 4px rgb(207, 111, 111);
width:100px;
height: 100px;
}
.inside{
border: solid 4px greenyellow;
width:50px;
height: 50px;
}