一般的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用于在jquery中调用,增加一个onsubmit函数用于submit前自己提交表单
saveReport对应函数为
function saveReport() { // jquery 表单提交 $("#showDataForm").ajaxSubmit(function(message) { // 对于表单提交成功后处理,message为提交页面saveReport.htm的返回内容 }); return false; // 必须返回false,否则表单会自己再做一次提交操作,并且页面跳转 }
上述js已经进行注释
你可能还感兴趣:
Android公共库(缓存 下拉ListView 下载管理Pro 静默安装 root运行 Java公共类)
Android系统下载管理DownloadManager功能介绍及使用示例
相关推荐
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开发中不可或缺的基础技术。通过上述例子,我们可以看到这些技术在实际项目中的具体应用方式。开发者可以根据实际需求灵活运用这些技术来构建高效且用户体验良好的...
在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>`的`action`属性,你可以指定表单提交后应跳转的URL。`method`属性(通常是`get`或`post`)则定义了数据如何发送到服务器。 2. **Dialog对话框**:在描述中提到的"dialog"可能指的是在提交表单前...
4. **页面跳转或显示提示**:一旦表单成功提交,立即跳转到另一个页面或显示一个提示信息,告知用户操作已完成,阻止他们继续提交。这也可以通过Ajax完成。 5. **使用sessionStorage或localStorage**:存储用户已...