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

最新推荐文章于 2024-06-15 23:38:46 发布
最新推荐文章于 2024-06-15 23:38:46 发布
阅读量3.8k 收藏 4
点赞数
分类专栏： HTML5


  1. <html>    
  2.   <body>    
  3.       
  4.   <form action="" method="post" target="nm_iframe">    
  5.       <input type="text" id="id_input_text" name="nm_input_text" />    
  6.       <input type="submit" id="id_submit" name="nm_submit" value="提交" />    
  7.   </form>    
  8.       
  9.   <iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>    
  10.       
  11.   </body>    
  12. </html>  

在默认情况下， 提交form表单后， 是有刷新的。 但是， 有的时候， 希望提交表单后不要刷新， 免得把页面已经有的东东给刷跑了， 那怎么搞呢（最近刚好碰到）？ 实例代码在上。

经测试， 实现了功能。 点击提交后， 不跳转， 不刷新， 靠谱。  其中， action可以设置为要触发的动作， 在本例中， 我写成空。


yibin94
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于HTML实现表单提交后不刷新页面
09-28
在网页开发中，为了提供更好的用户体验，经常需要在用户提交表单后不刷新整个页面，而是仅更新必要的部分。这通常通过使用AJAX（异步JavaScript和XML）或IFRAME技术来实现。以下是两种基于HTML实现表单无刷新提交的...
html中提交表单并实现不跳转页面处理返回值
热门推荐
三言两语
10-22 7万+
本文中实现在html中使用jquery的组件实现表单提交并在当前页面中处理返回值。 1、使用AjaxForm方式 （1）、导入js文件      需要导入相关的js文件。使用ajaxForm方式需要使用到jquery和jquery-form两个js文件。如： （2）、绑定表单 表单绑定它一般在$(document).ready(function () {}里定义
html 表单提交后不跳转页面,form 表单提交后实现页面不跳转
weixin_39600447的博客
06-03 669
class ReportTime extends egret.DisplayObjectContainer{private now = new Date(); //当前日期private nowDayOfWeek = this.now.getDay(); //今天本周的第几天private nowDay = this.now.getDate(); //当前日private nowMonth = ...
form表单点击提交按钮不跳转
最新发布
weixin_73199578的博客
06-15 302
哈哈哈这个问题我找了好久的原因，一度怀疑是自己的环境的问题，真的被自己蠢到了，不过自己也是刚开始接触前端，哈哈哈就笑笑吧。这里的sumbit才会把post的表单提交上去，一定要注意。
html form表单提交后不刷新不跳转的实现方法------巧妙地用iframe
认知 行动 坚持
02-28 3万+
在默认情况下， 提交form表单后， 是有刷新的。 但是， 有的时候， 希望提交表单后不要刷新， 免得把页面已经有的东东给刷跑了， 那怎么搞呢（最近刚好碰到）？ 实例代码如下：         经测试， 实现了功能。 点击提交后， 不跳转， 不刷新， 靠谱。
html form表单提交后不刷新不跳转的实现方法
系咩的个人收藏博客
01-04 5941
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"
Form提交表单页面刷新不跳转
09-28
为了实现提交表单后页面刷新而不跳转，常用的方法是使用iframe。iframe是一个内联框架，能够在一个页面中嵌入另一个页面。通过设置表单的target属性指向一个隐藏的iframe，当表单被提交时，数据就会发送到这个iframe...
Form表单提交刷新页面不跳转源码设计
09-28
在探讨Form表单提交并刷新页面却不进行页面跳转的实现方法时，我们需要从几个关键知识点入手。首先是HTML表单的基础知识，其次是如何利用表单的提交机制，然后是通过iframe技术实现页面内容的局部刷新而不影响整个...
vue form 表单提交后刷新页面的方法
10-18
接下来，我们将详细介绍在Vue中表单提交后刷新页面的方法。 首先，需要理解的是，Vue的响应式系统如何帮助我们在数据变更后更新视图。在Vue实例中，所有的数据都是响应式的，一旦数据变更，视图会自动进行更新。...
基于form表单submit提交不跳转
weixin_30906185的博客
11-09 1246
方法一：target <html> <body> <form action="" method="post" target="nm_iframe"> <input type="text" id="id_input_text" name="nm_input_text" /> <input type="...
html 提交表单后页面不跳转且不刷新当前页面
muwuren的博客
11-28 2289
原文链接：https://blog.csdn.net/a2524289/article/details/78782318 希望提交表单后页面不跳转且不刷新当前页面，然而查了很多方法都没有解决。 由于Form 是提交后一定刷新页面的，所以我们可以用一个折中的办法。我们给Form 指定一个iframe，这样表单提交后刷新的就是我们指定的iframe 而不是页面了。 <iframe id="fra...
让form的action属性只提交数据不跳转页面
Frank杰的博客
10-01 3297
一个简单的问题，今天遇到并解决了，所以记录一下。 话不多说上代码： <form action="http://localhost:8080" method="post" enctype="multipart/form-data" accept-charset="utf-8" id="myForm" target="nm_iframe"> <input type="file" name="file" id="file" value="file"> <input t
Form表单实现异步的提交
一名假人的博客
08-27 3922
Form表单实现异步的提交 问题描述 <form>标签的一般情况下的默认写法是 <!-- 在method写提交方式 action写Servlet--> <form method="" action=""> </form> 但是这样提交form表单是非异步提交，在servlet不改变url的情况下，相当于重新刷新页面，这样就会导致几个问题： 1.浪...
html页面传值html页面，不跳转
weixin_42596278的博客
04-24 2483
实现方法：a标签的target属性 需求是：页面传值且页面不跳转，网上搜了一下， 方法1：最先用到的是ajax，a.html传值b.html,试过，b页面没反应 方法2：cookie传参（自行百度） 方法3：H5中Web Storage中的localStorage对象（自行百度） 我想要实现的功能是一个点击一个iframe页面菜单，然后另一个iframe页面收到值刷新页面， 如果这两...
好程序员分享JQuery.get提交页面不跳转的解决方法
cique2620的博客
04-17 245
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" ...
html跳转到新的页面参数不显示,html页面跳转传递参数问题
weixin_39624774的博客
06-04 908
效果如下：a页面点击跳转按钮后在b页面可以获取到对应的值。代码如下：a页面:a页面$(function(){name = $("#name").text();age = $("#age").text();$("#btn").on("click",function(){jump1();});});function jump1(){url = "b.html?name="+name+"&age...
submit提交form表单后不刷新页面--方法记录
Alone_in_的博客
12-11 7879
一、添加iframe 首先是一个比较简单且常用的实现方法 <form name="addNum" id="addNum" method="post" target="iframe"> …… </form> <iframe id="iframe" name="iframe" style="display:none;"></iframe>...
form表单提交不跳转页面并刷新
05-15
要实现form表单提交不跳转页面并刷新，可以使用Ajax技术。具体步骤如下： 1. 给form表单添加一个id属性，方便在JavaScript中使用。 2. 使用JavaScript获取form表单元素和提交按钮元素。 3. 给提交按钮元素添加一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值