// 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. python+request 常用基础学习笔记

    1.pycharm,避免控制台输出的json内容中文出现乱码. #注:乱码为Unicode格式:\u6d4b\u8bd5.加入如下代码后正确返回中文:测试 get_result = r.json() ...

  2. vue2 运动及相关函数

  3. oracle数据库中 impdb/expdb 详解

    创建逻辑目录,该命令不会在操作系统创建真正的目录,最好以system等管理员创建.create directory dpdata as 'd:\test\dump'; 二.查看管理理员目录(同时查看操 ...

  4. Liunx使用

    进入文件后的操作 1. vi打开文件后是命令模式状态,要用i或者a命令才可进入可编辑的状态哟. 2.在编辑模式的情况下敲完内容,这个时候就应该保存文件了. 保存文件要按esc,这样就会退回vi的命令模 ...

  5. vuex 全局store,前后端交互

    1.监听input输入框 titleHandler <div> <!-- 监听input输入框 titleHandler--> <input type="tex ...

  6. hash 算法

    Hash,一般翻译做“散列”,也有直接音译为“哈希”的,就是把任意长度的输入(又叫做预映射, pre-image),通过散列算法,变换成固定长度的输出,该输出就是散列值.这种转换是一种压缩映射,也就是 ...

  7. tesonflow实现word2Vec

    word2Vec 是实现从原始语料中学习字词空间向量的预测模型 使用word2Vec的skip_Gram模型 import collections import math import os impo ...

  8. 页面嵌套iframe时，怎样让iframe高度根据自身内容高度自适应

    总体思路是这样的,因为iframe里页面的内容是动态加载的,而且电脑屏幕宽度发生变化时,也得相应的去改变iframe标签的高度(如果高度确定就不用这么麻烦了): 首先,我们在父页面中定义一个方法,用来 ...

  9. Android中View大小的确定过程

    View and ViewGroup 安卓中有5种基本的 ViewGroup: FrameLayout RelativeLayout LinearLayout TableLayout Absolute ...

  10. tcp流式传输和udp数据报传输

    所有的书上都说, tcp是流式传输, 这是什么意思? 假设A给B通过TCP发了200字节, 然后又发了300字节, 此时B调用recv(设置预期接受1000个字节), 那么请问B实际接受到多少字节? ...