如何避免form提交进行页面跳转

最新推荐文章于 2022-08-21 01:24:21 发布

kylinah

最新推荐文章于 2022-08-21 01:24:21 发布

阅读量8.1k

点赞数 4

分类专栏：经验分享

本文链接：https://blog.csdn.net/kylinah/article/details/52755190

版权

经验分享专栏收录该内容

3 篇文章 0 订阅

订阅专栏

正常的form表单提交后需要进行页面跳转，如果我们不希望进行页面跳转，那么按以下两个步骤，通过一个iframe就可以解决这个问题：

步骤一：首先在页面中定义一个空的不可见的iframe

<!-- 空iframe，用于协助处理form提交后不进行页面跳转的问题 -->
<iframe id="iframe_display" name="iframe_display" style="display: none;"></iframe>

步骤二：将form的target指向该iframe

<form action="saveTreeNode" method="post" class="form-horizontal" role="form" target="iframe_display">

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

kylinah

关注关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

基于HTML实现表单提交后不刷新页面

09-28

使用ajax实现表单提交无刷新页面在项目中经常会用到。前一段时间跟着师傅学到了另外几种无刷新提交表单的方法，主要是基于iframe框架实现的。现在小编整理特此分享脚本之家平台供大家参考

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

01-19

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

参与评论您还未登录，请先登录后发表或查看评论

提交form表单如何让页面在提交后不发生跳转

宋黎江的专栏

12-24

1万+

提交form表单如何让页面在提交后不发生跳转

form表单提交数据不让跳转办法

兔子很忙

07-01

7520

form表单提交数据不让跳转办法应用场景： 1、弹出层 2、需要连续提交多条记录的情况 3、页面多个存在提交事件，需要局部提交情况方法一：加个return false，阻止表单跳转 <form action="/api/xxx/action" method="post" onsubmit = "return false"> 方法二：把type="submit"属性换成type=“button” <input type="button" name="submit" value="

使用Ext JS，不要使用页面做组件重用，尽量不要做页面跳转

webdev

06-30

163

今天，有人请教我处理办法，问题是：一个Grid，选择某条记录后，单击编辑后，弹出编辑窗口（带编辑表单），编辑完成后单击保存按钮保存表单，并关闭窗口，刷新Grid。这，本来是很简单的，但囿于开发人员对Ext JS的理解不到位，搞得相当的复杂了。主要复杂的地方在以下几点：为了实现编辑表单的可重用，把表单做成了页面，然后在Window中套IFRAME打开页面。表单的提交不是用Ajax提交...

form表单提交图片禁止跳转

weixin_30546933的博客

06-09

258

问题：最近在做项目时，遇到上传图片需求，且在不跳转的情况下获取到返回信息思路： 1. 使用ajax发送异步请求，经多次测试，最终以失败告终 2. iframe 禁止跳转（未尝试） 3. 修改form标签内提交请求逻辑实现：（思路3） 1. html代码： <!DOCTYPE html> <html lang="en"> <hea...

element ui表单提交禁止重载页面

Museions的开心博客

06-26

3958

element ui表单提交禁止重载页面,form json提交,,回车enter提交表单 <el-form :inline="true" class="demo-form-inline" @submit.native.prevent> <el-form-item label="企业名称" > <el-input v-model="x

element plus 表单提交跳转

thinklog2018的博客

08-31

3040

vue3 + element plus + vue router 在使用表单提交数据验证后跳转页面时，比如从登录页面跳转到home 页面，但home页面总是一闪又回到登录页面。百思不得其解，找了半天bug，原来是提交按钮没有写el-button，而是随手写成了button。不知道什么原因这个会影响到页面跳转。前端的坑实在是太多了。  <el-form-item> <el-button type='primary' @click="s.

禁用Form表单提交的跳转

Markix的博客

08-21

2315

默认Form表单提交后浏览器地址会跳转到action地址，有时候我们只是想要Form表单发起一个请求，并不希望浏览器的地址跳转。这就需要禁用Form表单的跳转机制。

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

10-16

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

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

12-13

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

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

10-16

本文将详细介绍如何使用layui的form表单实现POST请求并进行页面跳转，以确保数据安全且避免信息泄露。通常，通过`window.location.href`的方式添加参数进行页面跳转会将数据暴露在URL中，这可能带来安全风险。为了...

form表单提交后页面的跳转

u011079727的专栏

10-22

1万+

使用easyui的form表单登录后想跳转到主界面，发现老是不跳转(我用的是struts2的跳转机制),害我总以为是struts2出了问题，后来发现easyui的form有回调机制。解决方案：在界面中使用js进行跳转。 function regUser(){ //通过form的submit方法提交 $('#user_login_loginForm').form('submit',{

form表单提交，用submit方法并且跳到指定页面或不跳转

github_38696818的博客

07-08

6万+

开发环境后台Java 后台根据提交的整个表单，通过name名对应的value值；项目申请表负责人姓名* 性别女男联系邮箱*

Form表单只提交数据而不进行页面跳转的方法

u013594477的专栏

02-05

4万+

解决方案：将数据提交到saveReport（form的action指向）页面，但是页面又不进行跳转，即保持当前页面不变呢？利用jquery的ajaxSubmit函数以及form的onsubmit函数完成一般的写法为： "saveReport.htm" method="post"> …… type="submit" value="保存报告"/> 点击submit按钮或直接回车可

html中提交表单并实现不跳转页面处理返回值