<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe name="formsubmit" id="myFrame" style="display: none"></iframe>
<!-- 将form表单提交的窗口指向隐藏的ifrmae,并通过ifrmae提交数据。 -->
<form action="./login" method="POST" name="forphp" target="formsubmit">
<p>
<label for="uname">用户名：</label>
<input type="text" name="uname" id="uname"/>
</p>
<p>
<label for="pwd">密 码：</label>
<input type="password" name="pwd" id="pwd"/>
</p>
<p>
<input type="submit" value="登录" id="sub"/>
</p>
</form>
</body>
</html>
<script>
var form = document.getElementsByTagName('form')[0];
var frame = document.getElementById('myFrame');
function callback(a,b){
var uname = document.getElementById('uname').value;
var pwd = document.getElementById('pwd').value;
if(uname == a && pwd == b ){
alert('登录成功');
form.reset();
}
else{
alert('账号密码错误');
}
}
frame.addEventListener('load',function(event){
try{
var result = JSON.parse(frame.contentWindow.document.body.textContent);
// 识别登录结果
if (result.code === 200){
callback(result.result.uname,result.result.psw);
}
}catch(er){
//ignore
}
}
);
</script>
./login文件内容
{
"code": 200,
"result":{
"uname":"admin",
"psw":"test"
}
}