console
function showmessage(){
let form=document.getElementById("oneform");
let form_data=new FormData(form);
console.log(form_data.get("username"));
let pw=form_data.get("password");
if(pw=="")
{alert("请输入正确的密码！");}
let age=form_data.get("age");
if(age!="201721010168")
{alert("请输入正确的学号！");}
let sjh=form_data.get("shoujihao");
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);
showcontent(obj);
}
}
xhr.send(form_data);
}
function showcontent(obj){
let lists=document.getElementById('items');
lists.innerHTML="";
for(let key in obj) {
let item=document.createElement('li');
let lable=document.createElement('label');
lable.innerHTML=key+": ";
lable.style.color="red";
let title=document.createElement('P');
title.innerHTML=obj[key];
title.style.fontSize="25px";
item.appendChild(lable);
item.appendChild(title);
lists.appendChild(item);
}
}
<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 type="password" name="password"></div>
<div><label>性 别: </label><input type="radio" name="option1" value="male"><label>男</label>
<input type="radio" name="option2" value="female"><label>女</label></div>
<div><lable>学号: </lable><input type="number" name="age"></div>
<div><lable>手机号: </lable><input type="number" name="shoujihao"></div>
<div><label>出生日期: </label><input type="date" name="birthdate"></div>
<div><lable>学历: </lable><input type="checkbox" name="ben"><label>本科</label>
<input type="checkbox" name="shuo"><label>硕士</label>
<input type="checkbox" name="bo"><label>博士</label</div>
<div><input type="hidden" name="userid"></div>
<div><lable>入学年份: </lable><input type="month" name="enrollment"></div>
<div><lable>毕业年份: </lable><input type="month" name="graduation"></div>
<div><lable>自我介绍: </lable><input type="search" name="search"></div>
<div><lable>办公软件熟练程度：</lable><input type="range" name="office"></div>
<div><lable>附件</lable><input type="file" name="file" /></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>