最近在做一个项目,除去主页面是html页面,点击菜单按钮都由ajax加载生成,在这种情景下,F5刷新或者提交form表单就会将页面回复到刚刚打开主页面。

现在有一个这样的场景,点击子菜单生成一个子页面,在子页面有一个添加按钮,如图:

在点击添加按钮后会出现一个模态框,将信息录入,如图:

如果直接使用form表单提交那么就会将整个页面刷新,与预想的结果不符,于是在网上找到了设置form的target方法,在这个模态框中设置一个不可见的iframe。

<form id="upLoadApp" action="XXX" target="id_iframe" enctype="multipart/form-data" method="post">
</form>
<iframe id="id_iframe" name="id_iframe" style="display: none;">
</iframe>

但是这样的话,提交到iframe就无法获取表单回显的数据进行下一步的操作了,于是想起来action跳转后相当于重新加载一次页面,于是就在iframe的onload属性加入以下方法,

获取 iframe中的数据方法是: window.frames['id_iframe'].document.getElementsByTagName('pre')[0].innerHTML

<form id="upLoadApp" action="XXX" target="id_iframe" enctype="multipart/form-data" method="post">
</form>
<iframe id="id_iframe" name="id_iframe" style="display: none;" onload="var data = JSON.parse(window.frames['id_iframe'].document.getElementsByTagName('pre')[0].innerHTML);if(data.returnCode == 0){dialog.destroy();myCommonDT.ajax.reload();}else{alert(data.returnMessage);}">
</iframe>

这样在表单提交到iframe后就可以执行onload方法从而获取到返回的json数据

但是这样做的话第一次加载时页面会发出警告,如图

关于提交form不刷新的问题的更多相关文章

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

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

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

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

  3. django中form页面刷新后自动提交的解决方案

    如果一个页面包含了form,同时这个form中的提交按钮是type=submit的input的时候,你刷新该页面,就会有弹窗提示是否重新提交表单,这个特性不胜其烦,常见解决方法有两个: 第一种是前端的 ...

  4. 简单方法实现无刷新提交Form表单

    前几天遇到一个前端的问题.我希望提交表单后页面不跳转且不刷新当前页面,然而查了很多方法都没有解决. 由于Form 是提交后一定刷新页面的,所以我们可以用一个折中的办法.我们给Form 指定一个ifra ...

  5. ajax提交Form

    Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form ...

  6. 按下回车默认提交form表单问题

    最近开发中碰到一个问题,项目中有几个列表展示页面,允许用户通过查询条件模糊查询数据.用户录入关键字后点击回车会调用查询方法根据关键字查询,原先功能没有问题,但是最近发现在查询输入框中按下回车会直接刷新 ...

  7. ajax提交form表单问题

    form表单提交数据可以省下大量大量获取元素的代码,局部刷新时也可以用ajax提交form表单,但是要先把表单序列化,再把后台javaBean对象序列化,但是你有可能前后台都执行了系列化,但是后台还是 ...

  8. 实用ExtJS教程100例-009:ExtJS Form无刷新文件上传

    文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...

  9. 使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html

    使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...

随机推荐

  1. ACM 矩阵题目整理

    先从最基础的矩阵快速幂加速递推开始. HDU 1005 Number Sequence |f[n-2],f[n-1]|* |0 B| =|f[n-1], B*f[n-2]+A*f[n-1]|=|f[n ...

  2. Mousejack Hacking : 如何利用MouseJack进行物理攻击

    0×00 前言 近期安全公司Bastille Networks(巴士底狱)安全研究员发现大多数无线鼠标和接收器之间的通信信号是不加密的.黑客可对一百米范围内存在漏洞的蓝牙无线键鼠进行嗅探甚至劫持,从而 ...

  3. SQL分类

    SQL(Structure Query Language)结构化查询语言,是使用关系型数据库的应用语言. SQL主要可以划分为以下三个类别: DDL(Data Define Language)语句:数 ...

  4. Using python to process Big Data

    Pandas is a great lib to process BIg Data. 1) pandas.pivot_table(data,values=None,columns=None,aggfu ...

  5. 转 C# DataTable 和List之间相互转换的方法

    一.List/IEnumerable转换到DataTable/DataView 方法一: /// <summary> /// Convert a List{T} to a DataTabl ...

  6. 循环神经网络(RNN, Recurrent Neural Networks)介绍(转载)

    循环神经网络(RNN, Recurrent Neural Networks)介绍    这篇文章很多内容是参考:http://www.wildml.com/2015/09/recurrent-neur ...

  7. Mac下Nginx环境配置

    环境信息: Mac OS X 10.11.1 Homebrew  0.9.5 正文 一.安装 Nginx 终端执行: brew search nginx brew install nginx 当前版本 ...

  8. 生成new, old的 shell script

    #!/bin/bash #usage: ./create_dts_diff_v2.x.sh path1 path2 __new_dir=$1 __old_dir=$2 #=============== ...

  9. AndroidImagePicker 的使用

    github地址 https://github.com/easonline/AndroidImagePicker 效果图

  10. mac android studio 编译时报Class JavaLaunchHelper is implemented in both

    Class JavaLaunchHelper is implemented in both /Library/Java/JavaVirtualMachines/jdk1.8.0_25.jdk/Cont ...