POST/GET不刷新全部页面的方法

最新推荐文章于 2024-05-06 12:49:24 发布

d1z1y1

最新推荐文章于 2024-05-06 12:49:24 发布

阅读量542

点赞数

分类专栏： HTML&JS 文章标签：前端 html javascript

本文链接：https://blog.csdn.net/d1z1y1/article/details/126479626

版权

HTML&JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

有些时候向网页服务器提交POST/GET数据时，不希望服务器返回的数据覆盖原页面内容，比如登陆页面，提交用户名和密码内容时。

以下提供了一种不需要jquery方法。主要是页面中添加一个iframe，设为隐藏。将表单frame的target属性指向这个iframe的name。然后为这个iframe添加onload事件函数。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="GB2312">  
	<link rel="icon" href="data:image/ico;base64,aWNv">
    <title>登录</title>  
    <style>
    html{   
    width: 100%;   
    height: 100%;   
    overflow: hidden;   
    font-style: sans-serif;   
}   
 body{   
    width: 100%;   
    height: 100%;   
    font-family: 'Open Sans',sans-serif;   
    margin: 0;   
    background-color: #006dad;   
}   
#login{   
    position: absolute;   
    top: 40%;   
    left:50%;   
    margin: -150px 0 0 -150px;   
    width: 300px;   
    height: 300px;   
}   
#login h1{   
    color: #fff;   
    text-shadow:0 0 5px;   
    letter-spacing: 1px;   
    text-align: center;   
}   
h1{   
    font-size: 2em;   
    margin: 0.67em 0;   
}   
input{   
    width: 278px;   
    height: 18px;   
    margin-bottom: 10px;   
    outline: none;   
    padding: 10px;   
    font-size: 13px;   
    border-top: 1px solid #312E3D;   
    border-left: 1px solid #312E3D;   
    border-right: 1px solid #312E3D;   
    border-bottom: 1px solid #56536A;   
    border-radius: 4px;  
    color: #000000; 
    background-color: #ffffff;   
}   
.but{   
    width: 300px;   
    min-height: 20px;   
    display: block;   
    background-color: #4a77d4;   
    border: 1px solid #3762bc;   
    color: #fff;   
    padding: 9px 14px;   
    font-size: 15px;   
    line-height: normal;   
    border-radius: 5px;   
    margin: 0;   
}
    </style>
</head>  
<body>  
    <div id="login">
        <div style='width:300px;height:50px;text-align:center;'><h1>xxxxxxx</h1></div>
        <h1>登录</h1>
        <form method="post" target="hideIframe1">
            <input id='idUser' name='user' type="text" required="required" placeholder="用户名" ></input>
            <input type='password' id='idPassword' name='password'  required="required" placeholder="密码"></input>
			<button class="but" type="submit">登录</button>
		</form>
        <div style='width:300px;height:30px;margin-top:100px;text-align:center;color:white'>
        &copy; 2022 xxxxx科技有限公司</div>
		<iframe id="id_frame" name="hideIframe1" title="title_Iframe" style="display:none;"></iframe>
    </div>
	<script>
		function onloadFunc(){
			console.log("执行事件函数");
			var mybody = window.document.getElementById("id_frame").contentWindow.document.body;
			if(mybody){
				var txt = mybody.innerText;
				if(txt!=""){
					console.log("receive: " + txt);
					var o=eval('('+txt+')');
					if(o.en=="1")
						//{window.location.href="xx.html";}
						{alert("用户名和密码正确！");}
					else {alert("用户名或密码错误！");}
				}		
			}
			else{console.log("mybody 无效");}
		}
		var myiframe = window.document.getElementById("id_frame");
	    if(myiframe){myiframe.onload = onloadFunc;}
		else 		{console.log("myiframe 无效");}
    </script>
</body>
</html>

d1z1y1

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
POST/GET不刷新全部页面的方法

以下提供了一种不需要jquery方法。主要是页面中添加一个iframe，设为隐藏。将表单frame的target属性指向这个iframe的name。然后为这个iframe添加onload事件函数。有些时候向网页服务器提交POST/GET数据时，不希望服务器返回的数据覆盖原页面内容，比如登陆页面，提交用户名和密码内容时。
复制链接

扫一扫