console
function showmessage(){
let form=document.getElementById("oneform");
let form_data=new FormData(form);
console.log(form_data.get("username"));
let xuehao=form_data.get("username");
if(xuehao!="201721010170")
{alert("请输入正确学号！");}
let pw=form_data.get("password");
if(pw=="")
{alert("请输入密码！");}
let shouji=form_data.get("user_mobile");
if(shouji.length!=11)
{alert("请输入11位手机号！");}
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>
<p style="color:blue;">Get 方法演示</p>
<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><label>出生年月日: </label><input type="date" name="birthdate"></div>
<div><lable>年龄: </lable><input type="number" name="age"></div>
<div><lable>手机号: </lable><input type="tel" name="user_mobile"></div>
<div><label>Email: </label><input type="email" name="email"></div>
<div><lable>爱 好: </lable><input type="checkbox" name="reading"><label>看书</label>
<input type="checkbox" name="traveling"><label>旅游</label>
<input type="checkbox" name="sport"><label>运动</label</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="range" name="mood"></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>