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("pword");
if(pw=="")
{alert("请输入密码！");}
let sjh=form_data.get("email");
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 name="pword" type="password"></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="checkbox" name="Bike">唱歌
<input type="checkbox" name="Bike">跳舞
<input type="checkbox" name="Bike">游泳
<input type="checkbox" name="Bike">跑步
</label></div>
<div><label>手机号:</label><input type="email" name="email"></div>
<label>学科了解程度：</label><input type="range" name="extent"></div>
<form action="http://www.szgch.net/wp-json/myapi/my-post" method="post" enctype="multipart/form-data">
<div><label>喜欢颜色:</label><input type="color" name="color"></div>
<div><label>简历上传:</label><input type="file" name="fileToUpload" id="fileToUpload"></div>
<div><label>照片上传:</label><input type="file" name="fileToUpload" id="fileToUpload"></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>