form表单无刷新提交

最新推荐文章于 2021-03-19 13:27:43 发布

白不懂黑的静

最新推荐文章于 2021-03-19 13:27:43 发布

阅读量1.1k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/yyj108317/article/details/88641444

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

最近在处理一个界面，界面中有实时统计数据量的websocket,还有一个下载文件功能，下载采用的是form表单提交的方式，而正常的form表单提交势必会引起页面刷新（隐藏的），而websocket一旦在操作完下载后就会断开，表面上看两者是相互矛盾的，以下是解决步骤：

一：考虑从websocket入手；

网上有很多websocket的心跳机制啥的，但是此阶段对websokcet只是初探阶段，并没有深入，因此在网上各种搜索，想着让websokcet断开后再自动连接，后来找到了封装好的websokcet API库，说是可以实现在动连接，试了下确实可以，但不知道是自己使用不对还是怎么回事，不是很稳定，时好时坏，而且即使显示重新连接了，对于自身的功能来说，通信还是不正常

二：偶遇

在网上突然发现一篇文章，介绍form表单无刷新提交的，结合使用，完美解决

解决思路是这样的，在当前页面中隐藏一个iframe ,然后设置form表单的属性target="隐藏iframe的id",这样等于让form表单每次的刷新自动跳转到这个隐藏的iframe中，而用户的体验上来说，当前页面没有发生任何变动

以下为示例代码

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
<title>AjaxUpload</title>  
</head>  
<body onLoad="javascript:alert('onload')" onUnload="javascript:alert('onunload')">   
<form name="AjaxUpload" method="post" action="upload.jsp" target="hidden_frame">  
<input type="submit" name="Submit" value="提交">  
</form>  
<iframe name='hidden_frame' id="hidden_frame" style="display:none"></iframe>   
</body>  
</html>

总结：条条大路通罗马，不得不说，技术这玩意不能拘泥于常规思维，只要能解决问题，换个思路，也会豁然开朗。