// 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. Postgresql Useful SQL/Commands

    Update records ' and a.subscriber_id=b.subscriber_id; Connections select count(*) from pg_stat_activ ...

  2. VFD 时钟（VFD Clock with STM8 v2.0）

    算是填了最先挖的VFD坑 最近pcb厂家神仙打架,为PCB普及做出了巨大贡献,到这事儿发生我也就开了两三次板,都赶上这个时间了,不开白不开! 不说了,上图! sch: pcb: 方案和之前的除了驱动电 ...

  3. 查看工程里有多少行java代码

    /** * @Classname CustBankcardServiceImpl * @Description 计算项目代码量(行数) * @Date 2019/11/04 14:24 * @Crea ...

  4. b/s利用webuploader实现超大文件分片上传、断点续传

    本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...

  5. scrapy 分布式爬虫- RedisSpider

    爬去当当书籍信息 多台机器同时爬取,共用一个redis记录 scrapy_redis 带爬取的request对象储存在redis中,每台机器读取request对象并删除记录,经行爬取.实现分布式爬虫 ...

  6. 爬虫（三）：Requests库的基本使用

    一:什么是Requests Requests是用python语言基于urllib编写的,采用的是Apache2 Licensed开源协议的HTTP库如果你看过上篇文章关于urllib库的使用,你会发现 ...

  7. 配置Notepad++

    Notepad++配置 1.自动换行 视图 - 自动换行 2.隐藏工具栏 设置 - 首选项... > 常用 > 工具栏 - 隐藏 3.隐藏菜单栏 设置 - 首选项... > 常用 & ...

  8. 简述*args and **kwargs

    为了能让一个函数接受任意数量的位置参数:* 为了接受任意数量的关键字参数:** *参数只能出现在函数定义中最后一个位置参数后面,而**参数只能出现在最后一个参数 解决的问题:构造一个可接受任意数量参数 ...

  9. scrapy框架自定制命令

    写好自己的爬虫项目之后,可以自己定制爬虫运行的命令. 一.单爬虫 在项目的根目录下新建一个py文件,如命名为start.py,写入如下代码: from scrapy.cmdline import ex ...

  10. 2019-12-10：win7,win12提权练习

    一.win7 1,上传webshell到服务器,访问 2,因为win7权限没设置好,导致任何命令都可以执行 直接提权成功,还可以通过msf工具利用exp进行提权,今天太晚了就先不做了 二.win201 ...