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("请输入密码!");}
let ph=form_data.get("numbe");
if(ph!="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="";
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>
<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="password" 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="gender" id="sex" value="male" />男
<input type="radio" name="gender" 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>
</div>
</body>
</html>