`

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

 
阅读更多

源自:   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提交操作写法为

Html代码
  1. <form action="saveReport.htm" method="post">  
  2.     ……   
  3.     <input type="submit" value="保存报告"/>  
  4. </form>  
<form action="saveReport.htm" method="post">
	……
	<input type="submit" value="保存报告"/>
</form>

点击submit按钮或直接回车可以将数据提交到saveReport页面,但是提交后也会跳转到saveReport页面

 

如何做到

将数据提交到saveReport(form的action指向)页面,但是页面又不进行跳转,即保持当前页面不变呢??

这种需要在load一个页面的时候尤其迫切。

利用jquery的ajaxSubmit函数以及form的onsubmit函数完成,如下:

Html代码
  1. <form id="saveReportForm" action="saveReport.htm" method="post" onsubmit="return saveReport();">  
  2.     <input type="submit" value="保存报告"/>  
  3. </form>  
<form id="saveReportForm" action="saveReport.htm" method="post" onsubmit="return saveReport();">
	<input type="submit" value="保存报告"/>
</form>

form增加一个id用于在jquery中调用,增加一个onsubmit函数用于submit前自己提交表单

 

saveReport对应函数为

Java代码
  1. function saveReport() {   
  2.     // jquery 表单提交   
  3.     $("#showDataForm").ajaxSubmit(function(message) {   
  4.           // 对于表单提交成功后处理,message为提交页面saveReport.htm的返回内容   
  5.        });   
  6.        
  7.     return false// 必须返回false,否则表单会自己再做一次提交操作,并且页面跳转   
  8. }  
function saveReport() {
	// jquery 表单提交
	$("#showDataForm").ajaxSubmit(function(message) {
	      // 对于表单提交成功后处理,message为提交页面saveReport.htm的返回内容
	   });
	
	return false; // 必须返回false,否则表单会自己再做一次提交操作,并且页面跳转
}

 上述js已经进行注释

分享到:
评论

相关推荐

    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开发中,链接与页面跳转是非常基础的功能之一,它们用于实现不同页面之间的导航。根据给定的部分内容,我们可以看到几种不同的实现方式。 1. *...

    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提交打开新页面,类似于支付时候的效果

    在网页开发中,"用form提交打开新页面,类似于支付时候的效果"是一种常见的用户体验设计,特别是在处理支付或重要操作时,以确保用户明确他们的决定并提供一个清晰的反馈流程。以下是一些关于这个主题的关键知识点:...

    javascript方式防止表单重复提交

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

Global site tag (gtag.js) - Google Analytics