如何防止表单提交时页面重载？
要防止表单提交时页面重载，可以使用以下方法：
- 使用Ajax提交表单：通过使用Ajax技术，可以在不刷新整个页面的情况下将表单数据发送到服务器。这样可以避免页面的重载。可以使用jQuery的$.ajax()方法或者原生的XMLHttpRequest对象来实现。
- 阻止表单默认提交行为：在表单的提交事件中，使用JavaScript的preventDefault()方法来阻止表单的默认提交行为。可以通过给表单元素绑定submit事件，并在事件处理函数中调用preventDefault()方法来实现。
- 使用iframe或者隐藏的iframe进行表单提交：可以在页面中创建一个隐藏的iframe元素，并将表单的target属性设置为该iframe的名称。这样表单提交时，页面不会重载，而是在iframe中加载提交结果。可以通过给iframe元素绑定load事件来获取提交结果。
- 使用表单的target属性指定一个新的窗口或者iframe：可以将表单的target属性设置为一个新的窗口或者iframe的名称，这样表单提交时会在新的窗口或者iframe中加载提交结果，而不会导致当前页面的重载。
- 使用localStorage或者sessionStorage保存表单数据：可以在表单提交前，将表单数据使用localStorage或者sessionStorage进行保存。然后在页面重载后，再从localStorage或者sessionStorage中获取保存的表单数据，以便进行后续处理。
需要注意的是，以上方法只是防止表单提交时页面重载的一些常用方法，具体的实现方式还需要根据具体的需求和技术栈来选择和调整。
相关·内容
1回答
event.preventDefault()在提交按钮函数中到底做了什么？
javascript、events、submit、dom-events
学习，我知道这个问题不是它的一部分，但我一直想知道preventDefault部分是做什么的：
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
当我在页面中打开示例并删除preventDefault时，当我点击提交时页面不会刷新。那么，这是否意味着单击提交按钮的默认行为是将表单数据发送到某个地方，然后将当前页面重定向到其他地方？通过使用preventDefault，这可以防止这种情况发生吗？此事件是Dom
浏览 1提问于2017-04-19得票数 7
2回答
即使提供了value=“”，也要明确清除表单字段
javascript、php、jquery、html
我将数据库中的数据显示在HTML表单中，以便用户可以对其进行编辑。
<input type="text" id="name" placeholder="Name" required = " true" value = <?php if(isset($_SESSION['name'])) echo $_SESSION['name'] ;?>>
这是我不得不使用会话存储的原因。这里的问题是，当我刷新页面时，它显示存储在会话中的旧值。有没有办法在加载表单时显式地清除它？我尝试了
浏览 0提问于2018-06-11得票数 1
4回答
从iframe访问父窗口的元素
javascript、jquery、ajax、iframe
我有一个页面，我们可以叫它parent.php。在这个页面中，我有一个带有提交表单的iframe，在这个页面之外，我有一个id为"target“的div。是否可以在iframe中提交表单，并在成功时刷新目标div。比方说加载一个新的页面到它里面或者别的什么？
编辑:目标div在父页面中，所以我的问题基本上是，您是否可以在iframe外部对父页面进行jQuery调用。那会是什么样子呢？
编辑2:这就是我的jquery代码现在的样子。它在iframe页面的中。div #目标在parent.php中
$(;"form[name=my_form]").submit(functi
浏览 1提问于2011-08-11得票数 80
回答已采纳
1回答
当从本地主机的第二个窗口登录时，LocalStorage中的数据会被覆盖。
jquery、redirect、local-storage
在submit (index.html)上，我需要执行以下ajax来将用户数据保存到localStorage，因为我将重定向到另一个<code>E 110</code>路由<code>E 211</code>，它将不具有<code>E 112</code>data<code>E 213</code>，除非。这一切都很好，但是当我在一个新的localStorage本地主机窗口和I登录打开页面时，中的旧数据就会被覆盖。
为什么会发生这种事？
// Login index.js
$('#frm-
浏览 2提问于2018-05-18得票数 0
回答已采纳
1回答
在Symfony2中ajax提交表单
javascript、php、jquery、ajax、symfony
我有操作，首先需要通过ajax呈现表单，然后需要更新现有值。我已经得到了带有适当值的表单，但是当我单击ajax提交表单时，我无法阻止表单提交，我有以下脚本：
$('#edit-comment').click(function (e) {
e.preventDefault();
console.log(1);
});
但还是要工作才能屈服！我做错了什么。我也不知道如何在编辑操作中处理提交的表单。以下是它的现有部分：
/**
* @Route("/edit/comment", name="chat_edit", options=
浏览 3提问于2015-01-28得票数 2
回答已采纳
1回答
如何才能在不触发页面刷新的情况下将数据提交到服务器？
javascript、php
我有两个表单元素:一个SELECT下拉列表，用作javascript函数的输入；一个TEXTAREA，它也是同一个javascript函数的输入。文本区域输入需要与本地javascript的使用或多或少同时提交到服务器上的PHP。理想情况下，javascript函数和提交到服务器的$_POST都是由相同的按钮点击触发的，但我无法让它工作，因为使用javascript函数输入的文本区域会阻止它提交到服务器，反之亦然(这两个操作都需要相同的数据，显然会造成干扰。通过在输入按钮上使用onmouseout属性触发DOM提交()到服务器，我已经成功地解决了这个问题。 我现在遇到的问题是，当文本区域输入
浏览 29提问于2019-09-15得票数 0
回答已采纳
1回答
在提交时保留和保留dropdownlist的旧值并刷新页面
javascript、jquery、asp.net、asp.net-mvc
我想在刷新或单击提交页面或回发后保持Dropdownlist选定值不变。
这是java-script函数，它在更改时获取Dropdownlist选定值，然后再次将其放入Dropdownlist中：
$("#Rooms").on('change', function (e) {
window.localStorage.setItem("Rooms", $("#Rooms option:selected").val());
$("#Rooms").val(window.localStorage.getItem("
浏览 0提问于2017-04-25得票数 1
1回答
上传后可以删除iframe吗？
javascript、jquery、html、iframe
我目前在AJAX上传表单中使用iframe，我的问题是，一旦文件上传到iframe，它会将数据附加到div中，那么我是否可以安全地说，一旦加载完成，我就可以删除iframe了？
我的js是
$("#formsubmit").click(function (event) {
event.preventDefault();
var iframe = $('<iframe name="postiframe" id="postiframe" style="display: none&#
浏览 1提问于2013-08-22得票数 1
回答已采纳
5回答
在JavaScript事件处理中，为什么“返回false”或"event.preventDefault()“和”停止事件流“会产生影响？
javascript、jquery、event-handling、jquery-events
据说，当我们处理“单击事件”时，返回false或调用event.preventDefault()会产生不同的结果，其中
不同的是，preventDefault只会阻止默认事件操作的发生，即页面重定向于链接单击、表单提交等，返回false也将停止事件流。
这是否意味着，如果多次为多个操作注册单击事件，则使用
$('#clickme').click(function() { … })
返回false会阻止其他处理程序运行吗？
我现在在Mac上，所以只能使用火狐和Chrome，而不能使用IE，IE有不同的事件模型，并通过添加3个处理程序在火狐和Chrome上测试它，所有3个处
浏览 2提问于2010-06-15得票数 14
回答已采纳
2回答
e.preventDefault()方法真正做了什么？
javascript、jquery
我尝试过使用preventDefault()来在不重新加载页面的情况下提交表单，但它并没有给出任何结果。有人能解释一下preventDefault()方法在JQuery中的用途是什么吗？
浏览 3提问于2015-10-20得票数 9
回答已采纳
1回答
jQuery移动不听e.PreventDefault
php、javascript、jquery、jquery-mobile
我想寻求帮助的jQuery移动插件冲突在我的主要脚本。我试图创建另一个版本的网站，这是移动版本与购买模板，使用jQuery移动。不过，该网站是在CodeIgniter框架的基础上，从网络版本。
在我的主脚本中，每个表单提交都有一个preventDefault()函数来显示验证错误。然后，当我迁移我正在使用购买的移动模板的站点时，它似乎不听preventDefault()。每当我提交表单时，它都会显示验证错误，但在读取表单之前，会在几秒钟后更改页面。它刷新了网站。
我的脚本看起来有点像下面的代码。这适用于我的网络版本。>>>
$('form#frm-signup-upd
浏览 3提问于2013-08-27得票数 3
回答已采纳
3回答
窗体不提交加载回调。
jquery、forms、iframe、callback
我有困难加载一个页面在一个iframe作为一个回调，以形成提交。当我在没有回调的情况下提交表单时，提交很好，但是当我试图在提交表单后加载页面时，表单不会提交。
以下工作：
$("#new_explanation").on('submit', function(ev){
});
以下内容不起作用：
$("#new_explanation").on('submit', function(ev){
$('#lastExplanation').load("http://localhost:3000/last
浏览 3提问于2013-11-05得票数 0
回答已采纳
2回答
只有在ajax验证成功后才提交表单
javascript、php、jquery、ajax、forms
我试图让一个“添加到购物车”按钮只执行一个实际的提交(继续到一个添加到购物车的页面)，如果ajax调用成功返回，否则将显示ajax结果中给出的消息，而不是实际执行提交。
到目前为止，这就是我所拥有的
$("#addtocart").submit(function(event){
var data = $(this).serialize();
$.ajax({
type: "POST",
url: "/cart/check",
dataType:"json",
浏览 3提问于2016-05-01得票数 2
回答已采纳
1回答
如何在IE中单击后退按钮时使表单值相同
javascript、jquery、html、back-button
如何让表格值在IE中的后退按钮上保持一致？
当我用下面的按钮点击后退按钮时
<input type="button" value="Back" onClick="history.go(-1);return true;" class="back-button">
它不显示IE中的表单值。
我有一个带有一些输入的表单，当我提交表单转到下一页时，我有一个后退按钮，当我单击时，我会进入表单页面，但表单上没有值，我有字段，这是IE的问题
浏览 0提问于2012-08-28得票数 2
1回答
将表单数据发送到SQL，然后发送PDF
php、sql、forms
我有一个表单，我可以提交到一个SQL或转换成一个PDF下载，但我一直没有运气它做到了这两个。
期望的行为->表单被提交->数据发送给SQL ->用户定向到填充的->下载。
当前行为->表单被提交->数据发送到SQL ->，其他什么都没有发生。
下面是将表单发送到多个源的java代码。理想情况下，我希望表单提交，然后重定向用户(没有iframe)到pdf页面。
<script language="javascript">
function OnButton1()
{
document.Form1.action = &#
浏览 2提问于2014-10-07得票数 0
回答已采纳
5回答
JQuery将live()侦听器添加到表单处理程序
jquery、forms
我在我的index.html页面上有以下代码。每当我在此页面上提交表单时，系统都会收到警报并显示在屏幕上，然后输出表单处理脚本被转储到#results div中。太棒了！
$('form').ajaxForm({
beforeSubmit: function() {
alert("Form submitted!");
$('#results').html('Submitting...');
},
success: function(output) {
v
浏览 0提问于2011-08-13得票数 0
1回答
强制重新登录而不丢失更改的web应用程序模式？(不保存草稿)
asp.net、asp.net-mvc、web-applications、login、forms-authentication
今天，我们的B2B web应用程序在6小时不活动后会使用户会话超时。如果用户的会话超时，则将用户重定向到登录页面，然后在登录后重定向回原始目的地(通过发送到登录页面的"returnURL“查询字符串参数)。
这对于常规的HTTP GET请求非常有效。但是，如果用户正在进行长时间的数据输入操作，然后回家过夜呢？如果用户第二天早上尝试提交表单，他们所做的更改就会丢失。
相反，我想为表单启用一个类似的工作流，就像我们目前对GET请求所做的那样:用户单击“保存”，强制用户重新进行身份验证，然后(如果登录成功)表单将被提交。另一种选择是强制重新登录，而不是提交表单，只需将用户放在原始页面上，以便
浏览 1提问于2014-12-11得票数 0
5回答
window.open弹出窗口在单击事件期间被阻止
javascript、jquery、window
我最终需要做的是运行一个$.ajax()调用，然后在运行之后，打开一个新窗口。
用户单击保存当前表单的“预览”按钮，然后打开一个新窗口，其中显示包含刚保存的数据的项目预览。
但按原样，window.open函数会被弹出窗口拦截器阻止。
以下是我的代码的基本部分：
HTML：
<a href="/surveys/185/preview" class="preview" target="_blank">Preview</a>
JavaScript：
$('.preview').live('click&#
浏览 2提问于2011-07-09得票数 29
回答已采纳
2回答
如何选择HTML页面初始访问和通过back按钮重新加载之间的区别？
javascript、html、local-storage
免责声明:我对JavaScript不是很好。:-)
我在HTML表单中有许多下拉元素(其中一些元素是根据对服务器的AJAX请求的结果创建的，具体取决于其他表单元素)。
特别是，用户可以选择一个 country ，并且根据国家的不同，他们还可以选择文化。
当用户提交表单时，然后使用back按钮重新显示表单，我已经准备好javascript来重新运行AJAX请求并重新构建依赖的区域性选择器。我还使用localStorage来跟踪他们以前作为区域性选择的内容，以便在重新构建选择器之后重新选择该值。一切都很好。
但是，我发现，如果用户返回站点主页，然后导航回有关页面，那么localStorage值仍然
浏览 1提问于2013-05-05得票数 0
2回答
我有一个iframe的内容，我需要谷歌索引。这个是可能的吗？
php、javascript、html、xml、search
我有一个分类广告网站。
index.html有一个表单：
<form action="php_page" target="iframe" etc...>
iframe显示结果，php_page为iframe构建结果。基本上，php_page构建一个包含来自mysql数据库的结果的表，并将其输出。
我的问题是，谷歌不会索引这些内容。
我该如何解决这个问题呢？
我最初使用Iframe的原因是为了避免在点击提交时重新加载页面。
由于各种原因，Ajax不能被使用，我在这里不再赘述。
有什么好主意吗？
谢谢
更新：
我有一个网站地图的网址，所有的分类
浏览 1提问于2010-10-07得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
