// no redirect

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-type" content="text/html, charset=utf-8">

    <meta content="IE=edge" http-equiv="X-UA-Compatible">

    <meta name="description" content="header and footer in checkout pages">

    <meta name="keywords" content="checkout, footer, header">

    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" name="viewport">

    <title>页面form提交不刷新</title>

  </head>

  <body>

    <div>

      <\iframe  name="J_iframe" width="100" height="100"> </\iframe>

      <form action="https://test.com" method="post" target="J_iframe">

        <input type="text" name="name" value="lily" />

        <button>submit</button>

      </form>

    </div>

   	  </body>

</html>

解决被iframe时submit请求是iframe提交不是form提交问题

setTimeout(() => {

this.initForm.submit();

}, 10);

无刷新更换浏览器地址：

window.history.pushState(null, null, window.self.location); // 解决不能被iframe问题

doc: https://ctrlq.org/code/19233-submit-forms-with-javascript

form 提交页面不刷新实现的更多相关文章

  1. Form提交是会刷新页面的

    今天发现如果页面中有form,点击提交按钮是会刷新页面的,为了禁止页面刷新行为,可以这么做: <form class="form-horizontal" id="u ...

  2. 提交form表单不刷新页面案列

    提交form表单不刷新页面其实很简单的,这里拿上传图片来举列,大家有什么其它的方法也欢迎留言告知与我 <form action="" method="post&qu ...

  3. form表单target的用法，实现无刷新提交页面

    form表单的target,当将iframe设置为隐藏时,可以实现当前页表单提交而不进行跳转刷新.代码如下,首页在页面里准备一个form表单和一个iframe. <form action=&qu ...

  4. Jquery实现form表单提交后局部刷新页面的多种方法

    最近做一个小项目,刚好需要用到搜索功能,实现搜索框内输入数据然后按回车或者点击“提交”,然后给后台数据库处理并返回数据给前端,在前端局部更新数据. 但是遇到了一个小问题,就是form表单下任意输入框输 ...

  5. Form提交表单页面不跳转

    1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  6. 利用iframe实现提交表单是页面部分刷新

    直接上代码: <%@ page language="java" import="java.util.*" pageEncoding="utf-8 ...

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

    正常的form表单提交后需要进行页面跳转,如果我们不希望进行页面跳转,那么按以下两个步骤,通过一个iframe就可以解决这个问题: 步骤一:首先在页面中定义一个空的不可见的iframe <!-- ...

  8. 关于button和submit的form提交以及 页面跳转问题

    最近在做官网的注册登录form提交时遇到了这个问题,1.0时因为使用普通的模板并没有出现页面跳转失败问题 由于2.0时更换了注册模板,此时按钮样式是以下样式 而在css样式的模板里使用的是button ...

  9. 页面无刷新Upload File

    页面无刷新Upload File. 利用jquery.form.js的ajaxForm提交文件. 具体参考以下代码: 前台html <%@ Page Language="C#" ...

随机推荐

  1. 使一个div元素上下左右居中

    第一种方法 浮动流自我调节 .box{ widht:200px; height:200px; position:relative; } .box .son{ width:100px; height:1 ...

  2. cpu 或 内存 偏高的分析套路

    参考资料: https://mp.weixin.qq.com/s/fb9YxJr-yDdYQ86RE47y1w 1)通过针对此软件专业的分析工具或命令,找到占用cpu高的函数,2)通过调用栈(或源码搜 ...

  3. Nutch2.1+mysql+solr3.6.1+中文网站抓取

    1.mysql 数据库配置 linux mysql安装步骤省略. 在首先进入/etc/my.cnf (mysql为5.1的话就不用修改my.cnf,会导致mysql不能启动)在[mysqld] 下添加 ...

  4. [51Nod 1237] 最大公约数之和 (杜教筛+莫比乌斯反演)

    题目描述 求∑i=1n∑j=1n(i,j) mod (1e9+7)n<=1010\sum_{i=1}^n\sum_{j=1}^n(i,j)~mod~(1e9+7)\\n<=10^{10}i ...

  5. LOJ P10118 打鼹鼠 题解

    每日一题 day17 打卡 Analysis 二维树状数组的单点修改和区间查询,和一维的差不多 #include<iostream> #include<cstdio> #inc ...

  6. MongoDB 查看chunk块大小

    使用mongo shell连到mongos执行命令:AllChunkInfo("dbname.cellname",true) 点击(此处)折叠或打开 AllChunkInfo = ...

  7. Greenplum 调优--数据倾斜排查（一）

    对于分布式数据库来说,QUERY的运行效率取决于最慢的那个节点. 当数据出现倾斜时,某些节点的运算量可能比其他节点大.除了带来运行慢的问题,还有其他的问题,例如导致OOM,或者DISK FULL等问题 ...

  8. Vin2008 X64安装.Net Framework1.1

     http://www.iis.net/learn/install/installing-iis-7/how-to-install-aspnet-11-with-iis-on-vista-and- ...

  9. P2637 第一次，第二次，成交！

    题目描述 因为奶牛们的节食运动(奶牛还节食?)给农夫JOHN余下了一大批干草无法处理,所以他准备要开一个拍卖会去出售他的干草.他有N(1<=N<=1000)批干草(每批大约100捆).他的 ...

  10. 快速上手mpvue 项目

    初始化一个 mpvue 项目 $ node -v v8.9.0 $ npm -v 5.6.0 # 2. 由于众所周知的原因,可以考虑切换源为 taobao 源 $ npm set registry h ...