html form表单提交后不刷新不跳转的实现方法

最新推荐文章于 2024-06-15 23:38:46 发布

转载最新推荐文章于 2024-06-15 23:38:46 发布 · 5.9k 阅读

<html>
<body>
<form action="" method="post" target="nm_iframe">
<input type="text" id="id_input_text" name="nm_input_text" />
<input type="submit" id="id_submit" name="nm_submit" value="提交" />
</form>
<iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

系咩

关注关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

form表单提交不跳转的方式

10-08

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

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

09-28

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

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

form提交不跳转

AnnGreen的博客

01-15

7817

form 表单提交数据，往往会刷新页面，数据提交后会跳转到其他页面如果不需要刷新页面时，可以通过ifame实现无刷新。在form表单下定义一个ifame 将 form 的 target 属性指向 iframe 的 name 属性，这样就实现了不刷新页面的form提交。 <form action="./radioformserver.php" target="frameName"> <input type="radio" name="sel" id="" value="a"&gt

form表单提交不跳转

weixin_42185136的博客

03-04

4107

第一种：将form的target值设置为iframe的name值 <form action="/admin/agency_image" target="myIframe" method="post" enctype = "multipart/form-data" style="position:fixed;top:45px;"> <input id="upload-f...

html提交表单不跳转页面

STATICHIT静砸的博客

08-05

1353

因为写项目的时候上传头像这个功能我是用表单提交的，但是用表单提交有个问题就是页面会跳转搭配servlet中间页，这并不是我们想要的。第二行的括号中是表单提交后要回到的页面，如果不想跳转，就填写原页面即可。即在servlet中对表单数据操作完之后写下面这两行。在网上差了很多资料，很多方法并没有解决我都问题。最后发现这样子的有效的解决方法。......

form表单点击提交按钮不跳转

最新发布

weixin_73199578的博客

06-15

1080

哈哈哈这个问题我找了好久的原因，一度怀疑是自己的环境的问题，真的被自己蠢到了，不过自己也是刚开始接触前端，哈哈哈就笑笑吧。这里的sumbit才会把post的表单提交上去，一定要注意。

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

12-13

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

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

10-18

接下来，我们将详细介绍在Vue中表单提交后刷新页面的方法。首先，需要理解的是，Vue的响应式系统如何帮助我们在数据变更后更新视图。在Vue实例中，所有的数据都是响应式的，一旦数据变更，视图会自动进行更新。...

html5 ,form表单提交不跳转

qq_53790158的博客

06-08

3796

form表单是经常用到的一种提交数据的方法，经常用于登录或者注册功能。可是form表单提交会跳转至提交的链接，这对于前后端分离的项目就有点不太友好。所以说我们需要在表单提交后不跳转，并且获取到接口返回的数据。可以使用jQuery-form.js这个包。【自行下载】具体操作如下：以是表单html代码：......

html 提交表单，但不跳转页面处理返回值

djshichaoren的专栏

12-09

2201

最简单的方法先引入包再注册form表单处理返回信息的函数 $(document).ready(function () { //ajax form $('#add_delivery_message_form').ajaxForm(function (msg) {

js实现表单提交后不重新刷新当前页面

10-21

本文介绍了如何通过js实现表单提交后不重新刷新当前页面的方法实例.既提交了FORM保存了数据,页面也不会跳转，很实用。需要的朋友可以参考下

提交表单不刷新页面

very home

08-26

784

似乎看起来有两种方法，一种ajax，一种提交给iframe iframe方法： http://www.websbook.com/javascript/ymbsx_tjbd_4182.html %@LANGUAGE="VBSCRIPT" CODEPAGE=

Form 表单提交,不跳转页面

weixin_42454941的博客

04-02

9909

1. <form action="index_submit.do" method="get" accept-charset="utf-8" onclick="return avoidJump()" > <input type="text" name="username"> <input type="password" name="pas...

form 表单提交不刷新页面

weixin_40317130的博客

03-19

310

<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.form.min.js"></script> <form name="bearings" id="bear.

如何阻止 form 表单提交后刷新页面？

qq_40147756的博客

12-27

1213

如何阻止 form 表单提交后刷新页面？

表单提交后不刷新当前页面

linhuiDragon的专栏

01-17

222

[code="html"] [/code] 在form表单后添加iframe [code="html"] [/code] [code="js"] document.forms[0].target="rfFrame"; [/code] 这样既提交了form,保存了数据，又可以做其他操作...

form表单提交不刷新页面

热门推荐

菜鸟小灰灰的博客

03-30

1万+

form表单提交时，往往会刷新页面，数据提交到后台会跳转到其他页面如果不需要刷新页面时，可以通过ifame实现无刷新。在form表单下定义一个ifame , 将form的target属性指向frameFile，这样就实现了不刷新页面的form提交。

form表单只提交数据而不进行页面跳转的原因

m0_66468899的博客

08-25

450

2，原因：em，检查完各自路径发现都没有问题，仔细一开form的属性action（发现是action这个单词写错了哈哈哈）然后书写了一个Servelt程序，用来处理表单的提交，结果发现：form表单只提交数据而不进行页面跳转？1，背景：构建了javaWeb项目，然后书写了一个注册的html文件【主要是一个表单】，

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

兔子很忙

07-01

8781

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="

form表单提交不跳转页面并刷新

05-15

要实现form表单提交不跳转页面并刷新，可以使用Ajax技术。具体步骤如下： 1. 给form表单添加一个id属性，方便在JavaScript中使用。 2. 使用JavaScript获取form表单元素和提交按钮元素。 3. 给提交按钮元素添加一个click事件监听函数，在函数中使用Ajax发送请求。 4. 在Ajax成功的回调函数中，根据后端返回的数据进行相应的操作，比如更新页面中的数据等。下面是一个示例代码： HTML代码： ```html <form id="my-form" action="submit.php" method="post"> <input type="text" name="name"> <input type="submit" value="提交"> </form> ``` JavaScript代码： ```javascript var form = document.getElementById('my-form'); var submitBtn = form.querySelector('input[type="submit"]'); submitBtn.addEventListener('click', function(e) { e.preventDefault(); // 阻止默认的提交行为 var xhr = new XMLHttpRequest(); xhr.open('POST', form.action, true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 后端返回的数据 var data = xhr.responseText; // 对数据进行相应的操作 // ... } }; xhr.send(new FormData(form)); }); ``` 其中，FormData对象用于将form表单中的数据打包成一个键值对的对象，方便发送给后端。另外，需要注意的是，这里使用了XMLHttpRequest对象进行Ajax请求，如果需要兼容老版本的IE浏览器，需要使用ActiveXObject对象。