form表单提交不刷新页面

最新推荐文章于 2023-12-27 23:32:03 发布
最新推荐文章于 2023-12-27 23:32:03 发布
阅读量1w 收藏 6
点赞数 2
分类专栏： HTML 文章标签： 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012601647/article/details/68571323
版权
form表单提交时，往往会刷新页面，数据提交到后台会跳转到其他页面
如果不需要刷新页面时，可以通过ifame实现无刷新。
在form表单下定义一个ifame
<iframe name='frameFile' style='display: none;'></iframe>,
将form的target属性指向frameFile，这样就实现了不刷新页面的form提交。
菜鸟小灰灰
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Form表单提交刷新页面不跳转源码设计
09-28
主要介绍了Form表单提交刷新页面如何不跳转，实现源码如下，大家不妨参考参考
Form提交表单页面刷新不跳转
09-28
本文为大家介绍下使用Form提交表单后页面刷新不跳转的实现，感兴趣的朋友可以了解下
layui form表单提交后实现自动刷新
10-16
今天小编就为大家分享一篇layui form表单提交后实现自动刷新，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
form表单 ajax提交不刷新页面
weixin_53677404的博客
04-01 785
要实现使用form表单传递数据，然后使得返回来的数据加载，而不需要重载（刷新）整个页面，这里是通过ajax技术，不用action，否则页面会刷新，使得数据无法传递过去，这里使用onsubmit函数。 ...
submit提交form表单后不刷新页面--方法记录
Alone_in_的博客
12-11 7370
一、添加iframe 首先是一个比较简单且常用的实现方法 <form name="addNum" id="addNum" method="post" target="iframe"> …… </form> <iframe id="iframe" name="iframe" style="display:none;"></iframe>...
jQuery实现form表单基于ajax无刷新提交方法
qq_43209524的博客
10-13 379
一级标题 jQuery实现form表单基于ajax无刷新提交方法: <style> *{ text-align: center; } body{ background-color: #2F4F4F; } .input{ width: 400px; height: 40px; border-radius: 10px; border: 0; /* margin-
Form表单提交且不刷新页面的简单实现
SSS_Benjamin的博客
09-29 5319
form表单在点击提交后会刷新整个页面，有时会影响网页功能和效果 使之不刷新的解决思路：给form表单指定一个隐藏的iframe，这样提交表单后刷新的就是那个iframe而不是整个页面了 iframe： <iframe name="hidden" style="display:none;"></iframe> form： <form name="form" meth...
如何阻止 form 表单提交后刷新页面？
最新发布
qq_40147756的博客
12-27 440
如何阻止 form 表单提交后刷新页面？
点击按钮提交表单后如何不刷新页面
HEConfidence的博客
03-11 4823
<form id = "form1"> <input type = "text" value = "" placeholder = "请输入姓名"/> <input type = "submit"> </form> 我们给点击submit的时候，页面就被刷新，表单填写内容消失，并且，页面的可视区域也变了，那么如何让点击submit的时候，不会出现这种情况呢？ 我们在</form>标签后面加上一个<ifra...
html form 表单不刷新
qq_1397165474的博客
01-10 462
<iframe name="formSubmit" style="display:none;"> <!-- 隐藏起来将表单刷新指向这里 --> </iframe> <form action="#" method="POST" target="formSubmit" enctype="multipart/form-data"> </form>​
js实现表单提交后不重新刷新当前页面
10-21
本文介绍了如何通过js实现表单提交后不重新刷新当前页面的方法实例.既提交了FORM保存了数据,页面也不会跳转，很实用。需要的朋友可以参考下
vue form 表单提交后刷新页面的方法
10-18
今天小编就为大家分享一篇vue form 表单提交后刷新页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
form表单提交，回车+搜索按钮执行提交时禁止刷新页面
Orlando321的博客
03-16 507
1、form表单提交时刷新页面，是正常行为，想要禁止，应在form标签加入代码： <form onsubmit="return false;"> </form> 2、input+button组合时： <form onsubmit="return false;"> <input type="text"> <button...
form表单无刷新提交
白不懂黑的静的专栏
03-18 1173
最近在处理一个界面，界面中有实时统计数据量的websocket,还有一个下载文件功能，下载采用的是form表单提交的方式，而正常的form表单提交势必会引起页面刷新（隐藏的），而websocket一旦在操作完下载后就会断开，表面上看两者是相互矛盾的，以下是解决步骤： 一：考虑从websocket入手； 网上有很多websocket的心跳机制啥的，但是此阶段对websokcet只是初探阶段...
form表单提交后不刷新页面
weixin_30566111的博客
06-13 789
https://blog.csdn.net/yuuuuchang/article/details/78982590?tdsourcetag=s_pcqq_aiomsg 看了上面链接的，我只有以下方法才适用。。 我们在绑定onsubmit的时候是把returnfalse放进onsubmit后面的调用函数内的, 这样子如果你的函数出现了错误,将不会继续执行到函数最后'returnfa...
form提交数据处理但不刷新整个页面方法
weixin_30922589的博客
07-07 1609
在form的submit事件中,提交数据成功就会刷新整个页面;而需求中一般是提交数据就只需要局部刷新列表之类的. form在没有action跳转的条件下 方法一: 给form表单的submit函数，在最后加一句return false; 方法二: 把提交按钮单独放在表单之外,实现数据的提交 转载于:https://www.cnblogs.com/xiaolanschool/p/111...
div 制作button
菜鸟小灰灰的博客
01-17 6536
jsp主页面 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.g
火狐谷歌浏览器上传文件问题
菜鸟小灰灰的博客
10-24 2563
我们使用的IE浏览器可以获取本地完整路径，直接用    传到后台一个明路径就可以。但是谷歌，火狐等浏览器保护客户隐私，对我们本地路径进行了屏蔽。导致无法获取完整路径，只能通过页面将文件流传递到后台，在进行解析操作。我们可以使用 ajaxFileUpload.js文件： $.ajaxFileUpload({ url: basePath + '/dataInput/
form表单提交不跳转页面并刷新
05-15
要实现form表单提交不跳转页面并刷新，可以使用Ajax技术。具体步骤如下： 1. 给form表单添加一个id属性，方便在JavaScript中使用。 2. 使用JavaScript获取form表单元素和提交按钮元素。 3. 给提交按钮元素添加一个click事件监听函数，在函数中使用Ajax发送请求。 4. 在Ajax成功的回调函数中，根据后端返回的数据进行相应的操作，比如更新页面中的数据等。 下面是一个示例代码： HTML代码： ```html <form id="my-form" action="submit.php" method="post"> <input type="text" name="name"> <input type="submit" value="提交"> </form> ``` JavaScript代码： ```javascript var form = document.getElementById('my-form'); var submitBtn = form.querySelector('input[type="submit"]'); submitBtn.addEventListener('click', function(e) { e.preventDefault(); // 阻止默认的提交行为 var xhr = new XMLHttpRequest(); xhr.open('POST', form.action, true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 后端返回的数据 var data = xhr.responseText; // 对数据进行相应的操作 // ... } }; xhr.send(new FormData(form)); }); ``` 其中，FormData对象用于将form表单中的数据打包成一个键值对的对象，方便发送给后端。另外，需要注意的是，这里使用了XMLHttpRequest对象进行Ajax请求，如果需要兼容老版本的IE浏览器，需要使用ActiveXObject对象。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值