`

form表单只提交值,而不进行页面跳转

 
阅读更多

一般的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 ImageCache图片缓存

Android系统下载管理DownloadManager功能介绍及使用示例

下拉刷新及滚动到底部加载更多的Listview使用

viewpager实现画廊(一屏多个Fragment)效果

Android APK root权限静默安装

写在前面, 自己搭博客why and target

 

分享到:
评论
3 楼 陌路千里 2015-10-23  
return false即可
2 楼 Trinea 2011-09-30  
fhqllt 写道
这个确实算是一种方式,以前用过这种方式:
<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>

嗯,主要原理是jquery手动提交form。并且return false不让自动提交触发

你说的这种我还真没见过,是定位到自己的iframe吧
1 楼 fhqllt 2011-09-29  
这个确实算是一种方式,以前用过这种方式:
<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>

相关推荐

    layui使用form表单实现post请求页面跳转的方法

    layui使用form表单实现post请求,避免信息泄露(设置form表单隐藏,也可以初始化时隐藏): 这里是在数据表格查询数据时的按钮操作,其他操作类似 &lt;table id=myTable class=layui-table lay-filter=myTableDetail&gt;&lt;/...

    form表单提交不跳转的方式

    form提交后不跳转,增强用户体验。 工程采用jquery写前端,struts2做一个跳转返回数据。

    form表单只提交数据而不进行页面跳转的解决方案

    点击submit按钮或直接回车可以将数据提交到saveReport页面,但是提交后也会跳转到saveReport页面 如何做到 将数据提交到saveReport(form的action指向)页面,但是页面又不进行跳转,即保持当前页面不变呢?...

    漂亮 TP框架表单提交跳转页面

    在Web应用中,表单提交是用户与服务器交互的重要方式,而跳转页面则关乎用户体验和流程控制。ThinkPHP是一个流行的PHP开发框架,它提供了丰富的功能和简洁的语法,帮助开发者高效地构建Web应用。 首先,让我们了解...

    vue 解决form表单提交但不跳转页面的问题

    当我们想要在表单提交时执行特定的JavaScript函数而不是进行页面跳转,我们可以使用`.prevent`修饰符。`.prevent`修饰符会在事件触发时调用`event.preventDefault()`方法,阻止事件的默认行为,即防止表单的默认提交...

    Form提交表单页面刷新不跳转

    1、设计源码 复制代码代码如下: &lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... &lt;head&gt; &lt;... charset=utf-8″ /&gt;...Form提交表单页面不跳转&lt;/title&gt; &lt;/head&gt; &lt;b

    layui form表单提交之后重新加载数据表格的方法

    通过返回`false`,我们可以让表单提交时不会导致页面跳转,而是执行我们自定义的AJAX请求来与服务器交互,并刷新表格。 ###知识点五:实际应用与官方文档的参考 在文章的最后,提到了两个重要的参考资料:layui...

    vue获取form表单的值示例

    本文档中将分享一个如何在Vue.js中获取form表单值的示例,使用的是Element-ui组件库以及axios库来发送HTTP请求。下面将详细介绍这些知识点。 ### Vue.js中的表单数据绑定 Vue.js提供了一种简单的方式来实现数据的...

    jquery异步提交form表单

    在传统的HTML表单提交过程中,页面会跳转到服务器返回的结果页面,这在用户体验上并不理想,特别是在进行数据提交或者文件上传时。jQuery的`$.ajax()`函数或`.submit()`配合`.ajaxSubmit()`方法为我们提供了异步提交...

    链接、页面跳转、隐藏、表单提交

    综上所述,链接、页面跳转、隐藏以及表单提交是Web开发中不可或缺的基础技术。通过上述例子,我们可以看到这些技术在实际项目中的具体应用方式。开发者可以根据实际需求灵活运用这些技术来构建高效且用户体验良好的...

    ajax提交form表单

    在IT领域,特别是Web开发中,使用Ajax(Asynchronous JavaScript and XML)进行form表单的无刷新提交是一项关键技能。这种技术允许网页在不重新加载整个页面的情况下与服务器交互,从而提高了用户体验。以下是对给定...

    prototype -通过js提交表单,局部刷新不跳转

    在本话题中,我们关注的是如何使用Prototype库来实现表单的提交,从而达到局部刷新的效果,而不是整个页面的跳转。 Prototype的核心特性之一是其强大的`Form`对象。在传统的HTML表单提交中,当用户点击提交按钮时...

    JS页面跳转和js对iframe进行页面跳转、刷新

    本文将深入解析JS页面跳转的各种方法,以及如何利用JS操作iframe进行页面跳转和刷新。 ### 一、JS页面跳转方式 #### 1. `window.location.href`方式 这是最常见的页面跳转方法,通过改变`window.location.href`...

    Form表单提交刷新页面不跳转源码设计

    在探讨Form表单提交并刷新页面却不进行页面跳转的实现方法时,我们需要从几个关键知识点入手。首先是HTML表单的基础知识,其次是如何利用表单的提交机制,然后是通过iframe技术实现页面内容的局部刷新而不影响整个...

    vue form 表单提交后刷新页面的方法

    在使用Vue.js开发Web应用时,经常需要处理表单数据的提交,并在提交后更新页面数据。Vue.js作为一个响应式的前端框架,提供了简单而强大的方式来处理这类需求。接下来,我们将详细介绍在Vue中表单提交后刷新页面的...

    在一个form表单里同时上传多个文件和文本信息的解决方案

    通过以上步骤,我们成功地在一个form表单中实现了同时上传多个文件和文本信息的功能。这种实现方式不仅提高了用户的使用体验,也方便了开发者对上传数据的管理和处理。在实际应用中,还可以进一步扩展该功能,例如...

    用form提交打开新页面,类似于支付时候的效果

    通过设置`&lt;form&gt;`的`action`属性,你可以指定表单提交后应跳转的URL。`method`属性(通常是`get`或`post`)则定义了数据如何发送到服务器。 2. **Dialog对话框**:在描述中提到的"dialog"可能指的是在提交表单前...

    javascript方式防止表单重复提交

    4. **页面跳转或显示提示**:一旦表单成功提交,立即跳转到另一个页面或显示一个提示信息,告知用户操作已完成,阻止他们继续提交。这也可以通过Ajax完成。 5. **使用sessionStorage或localStorage**:存储用户已...

Global site tag (gtag.js) - Google Analytics