源自: http://trinea.iteye.com/blog/1157081
******************************
自已以前用过的一种方式:
<form id="form" name="form" method="post" action="saveitem.action"
target="form_iframe" />
<input type="submit" value="保存报告"/>
<form>
<iframe name="pfForm_iframe" width="0" height="0" scrolling="no">
</iframe>
******************************
一般的form提交操作写法为
- <form action="saveReport.htm" method="post">
- ……
-
<input type="submit" value="保存报告"/>
-
</form>
<form action="saveReport.htm" method="post">
……
<input type="submit" value="保存报告"/>
</form>
点击submit按钮或直接回车可以将数据提交到saveReport页面,但是提交后也会跳转到saveReport页面
如何做到
将数据提交到saveReport(form的action指向)页面,但是页面又不进行跳转,即保持当前页面不变呢??
这种需要在load一个页面的时候尤其迫切。
利用jquery的ajaxSubmit函数以及form的onsubmit函数完成,如下:
- <form id="saveReportForm" action="saveReport.htm" method="post" onsubmit="return saveReport();">
-
<input type="submit" value="保存报告"/>
-
</form>
<form id="saveReportForm" action="saveReport.htm" method="post" onsubmit="return saveReport();">
<input type="submit" value="保存报告"/>
</form>
form增加一个id用于在jquery中调用,增加一个onsubmit函数用于submit前自己提交表单
saveReport对应函数为
- function saveReport() {
-
-
$("#showDataForm").ajaxSubmit(function(message) {
-
- });
-
-
return false;
- }
function saveReport() {
// jquery 表单提交
$("#showDataForm").ajaxSubmit(function(message) {
// 对于表单提交成功后处理,message为提交页面saveReport.htm的返回内容
});
return false; // 必须返回false,否则表单会自己再做一次提交操作,并且页面跳转
}
上述js已经进行注释
分享到:
相关推荐
layui使用form表单实现post请求,避免信息泄露(设置form表单隐藏,也可以初始化时隐藏): 这里是在数据表格查询数据时的按钮操作,其他操作类似 <table id=myTable class=layui-table lay-filter=myTableDetail></...
form提交后不跳转,增强用户体验。 工程采用jquery写前端,struts2做一个跳转返回数据。
点击submit按钮或直接回车可以将数据提交到saveReport页面,但是提交后也会跳转到saveReport页面 如何做到 将数据提交到saveReport(form的action指向)页面,但是页面又不进行跳转,即保持当前页面不变呢?...
在Web应用中,表单提交是用户与服务器交互的重要方式,而跳转页面则关乎用户体验和流程控制。ThinkPHP是一个流行的PHP开发框架,它提供了丰富的功能和简洁的语法,帮助开发者高效地构建Web应用。 首先,让我们了解...
当我们想要在表单提交时执行特定的JavaScript函数而不是进行页面跳转,我们可以使用`.prevent`修饰符。`.prevent`修饰符会在事件触发时调用`event.preventDefault()`方法,阻止事件的默认行为,即防止表单的默认提交...
1、设计源码 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=utf-8″ />...Form提交表单页面不跳转</title> </head> <b
通过返回`false`,我们可以让表单提交时不会导致页面跳转,而是执行我们自定义的AJAX请求来与服务器交互,并刷新表格。 ###知识点五:实际应用与官方文档的参考 在文章的最后,提到了两个重要的参考资料:layui...
本文档中将分享一个如何在Vue.js中获取form表单值的示例,使用的是Element-ui组件库以及axios库来发送HTTP请求。下面将详细介绍这些知识点。 ### Vue.js中的表单数据绑定 Vue.js提供了一种简单的方式来实现数据的...
在传统的HTML表单提交过程中,页面会跳转到服务器返回的结果页面,这在用户体验上并不理想,特别是在进行数据提交或者文件上传时。jQuery的`$.ajax()`函数或`.submit()`配合`.ajaxSubmit()`方法为我们提供了异步提交...
### 链接、页面跳转、隐藏、表单提交 #### 一、链接与页面跳转 在Web开发中,链接与页面跳转是非常基础的功能之一,它们用于实现不同页面之间的导航。根据给定的部分内容,我们可以看到几种不同的实现方式。 1. *...
在IT领域,特别是Web开发中,使用Ajax(Asynchronous JavaScript and XML)进行form表单的无刷新提交是一项关键技能。这种技术允许网页在不重新加载整个页面的情况下与服务器交互,从而提高了用户体验。以下是对给定...
在本话题中,我们关注的是如何使用Prototype库来实现表单的提交,从而达到局部刷新的效果,而不是整个页面的跳转。 Prototype的核心特性之一是其强大的`Form`对象。在传统的HTML表单提交中,当用户点击提交按钮时...
本文将深入解析JS页面跳转的各种方法,以及如何利用JS操作iframe进行页面跳转和刷新。 ### 一、JS页面跳转方式 #### 1. `window.location.href`方式 这是最常见的页面跳转方法,通过改变`window.location.href`...
在探讨Form表单提交并刷新页面却不进行页面跳转的实现方法时,我们需要从几个关键知识点入手。首先是HTML表单的基础知识,其次是如何利用表单的提交机制,然后是通过iframe技术实现页面内容的局部刷新而不影响整个...
在使用Vue.js开发Web应用时,经常需要处理表单数据的提交,并在提交后更新页面数据。Vue.js作为一个响应式的前端框架,提供了简单而强大的方式来处理这类需求。接下来,我们将详细介绍在Vue中表单提交后刷新页面的...
通过以上步骤,我们成功地在一个form表单中实现了同时上传多个文件和文本信息的功能。这种实现方式不仅提高了用户的使用体验,也方便了开发者对上传数据的管理和处理。在实际应用中,还可以进一步扩展该功能,例如...
在网页开发中,"用form提交打开新页面,类似于支付时候的效果"是一种常见的用户体验设计,特别是在处理支付或重要操作时,以确保用户明确他们的决定并提供一个清晰的反馈流程。以下是一些关于这个主题的关键知识点:...
4. **页面跳转或显示提示**:一旦表单成功提交,立即跳转到另一个页面或显示一个提示信息,告知用户操作已完成,阻止他们继续提交。这也可以通过Ajax完成。 5. **使用sessionStorage或localStorage**:存储用户已...