iframe提交表单其实比ajax要方便一些，当然ajax也有ajax的好处，只是ajax编码处理有时有些麻烦，虽然经过转码是可以解决中文问题，但如果直接使用iframe不存这些问题了,下面来看看。

最近在做一个项目，用到上传图片功能，发现ajax不能enctype=”multipart/form-data” 属性的表单，没办法，只能使用form表单直接提交的方法了，但是form表单直接提交会跳转页面，这样很不友好，也不是项目需求，于是上网搜索了一番，发现可以使用隐藏的iframe来实现。

具体的原理是form表单提交到iframe里面处理，而这个iframe是隐藏的，所以提交表单的时候当前页面没有发生任何变化。

最重要的就是form的target属性指向iframe的name值，这样就实现了提交到隐藏的iframe中，那么返回值应该怎么获取呢？

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

    <script src="~/Scripts/jquery-1.8.2.js"></script>

    <script type="text/javascript">

        $(function () {

            $("#btnOK").click(function () {

                var frame1 = document.getElementById("frameFile1").contentDocument; //获取到iframe里面的html元素

                var frameJson1 = JSON.parse($(frame1).find('pre').html());

                console.log(frameJson1);

            });

        });

    </script>

</head>

<body>

    <form method="POST" action="/Home/Upload" enctype="multipart/form-data" target='frameFile1' id="form1">

        <input type="file" name="file" id="myphoto">

        <input type="submit" value="提交">

    </form>

    <iframe name='frameFile1' id="frameFile1" style='display: block;'></iframe>

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

    <input type="button" id="btnOK" value="确定" />

</body>

</html>

使用iframe实现页面无刷新提交表单的更多相关文章

  1. iframe实现面页无刷新提交表单

    一.表单提交到了哪里? 这似乎是个无知的问题,我们都知道表单提交到服务器,java,php,asp等服务器,然后由服务器去读.那么之后呢,服务器总要返回点什么吧,要么返回 一个xml或json数据,要 ...

  2. HTML无刷新提交表单

    通常对于无刷新提交表单,我们都是运用ajax实现的.前段时间跟着老大了解到另一种无刷新提交表单的方法,是利用iframe框架实现的.现在整理出来分享给大家. 第一种: (html页面) <!DO ...

  3. Ajax无刷新提交表单和显示

    ajax无刷新表单提交:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  4. Jquery Ajax自定义无刷新提交表单Form

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

  5. 不使用ajax,无刷新提交表单

    <form action="form_action.asp" method="get" onsubmit"check_form()" ...

  6. js无刷新提交表单

    $("#form1").attr("target", "frameFile"); $("#form1").submit( ...

  7. 无刷新提交表单(非Ajax实现)

    HTML代码: <iframe id="fra" name="frm" style="display: none;"></ ...

  8. ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单

    有时候,不得不考虑到以下场景问题: 数据库表字段会频繁更改扩展,而流行的重业务的js框架过于依赖json数据接口,导致的问题是,数据库表更改 -> 数据接口更改 -> 前段框架逻辑更改.. ...

  9. axios页面无刷新提交from表单

    页面部分大概意思一下 <form method="post" enctype="multipart/form-data"> ... </for ...

随机推荐

  1. static任我行- 为人不注意的static

    前几天一直在想,static方法如果没有被调用,会不会分配内存的问题,查了一下资料,终于得到了一个官方的说法了. static 方法调用:使用比较频繁的时候使用,像数据库连接串,Connection ...

  2. 程序员必看：如何降低APP软件开发的成本？

    程序员必看:如何降低APP软件开发的成本? 作为一名曾经的程序猿,一直想写一点东西给大家分享一下,今天终于动笔了,写写我们在开发的过程中怎样才能更快更好的进行开发,降低app开发成本.无论是个人开发者 ...

  3. 《Cracking the Coding Interview》——第1章：数组和字符串——题目6

    2014-03-18 01:45 题目:给定一个NxN的矩阵,就地旋转90度.(没有样例又不说方向的话,随便往哪儿转.) 解法:如果N为奇数,除了中心点以外四等分.如果N为偶数,四等分.按照A-> ...

  4. CSS系列（7）CSS类选择器Class详解

    这一篇文章,以笔记形式写. 1,  CSS 类选择器详解 http://www.w3school.com.cn/css/css_selector_class.asp 知识点: (1)    使用类选择 ...

  5. Python 列表、元组、字典及集合操作详解

    一.列表 列表是Python中最基本的数据结构,是最常用的Python数据类型,列表的数据项不需要具有相同的类型 列表是一种有序的集合,可以随时添加和删除其中的元素 列表的索引从0开始 1.创建列表 ...

  6. C编译器MinGW安装、下载及在notepad++中运行C程序

    一.C编译器MinGW的下载及安装步骤 打开MinGW官网:http://www.mingw.org/ 图一 图二 图三 图四 图五 图六 系统中配置环境变量: 图七 验证是否安装成功: CMD中运行 ...

  7. Python学习2，小程序

    今天主要就是弄懂了一个循环判 for i in [1,2]: for j in [1, 2, 3]: print(i, j) break else: print("for-j") ...

  8. StaticBox布局管理器

    wx.StaticBoxSizer构造方法如下: wx.StaticBoxSizer(box,orient = HORIZONTAL) box 是静态框对象,orient参数是布局方向  wx.HOR ...

  9. java课后作业2017.10.20

    动手动脑1: public class Test{ public static void main(String args[]) { Foo obj1=new Foo(); }}class Foo{ ...

  10. 错误error: Exception at 0x613baa14, code: 0xc0000005: read access violation at: 0x0, flags=0x0 (first chance)的解决办法

    一.错误原因 出现这个错误的原因多半是由于指针出现错误,即出现了空指针,也有说是变量没有初始化,笔者碰到的情况是发生了内存溢出. 二.定位方法 一般这种问题直接导致程序崩溃,直接调试,就能找到对应的问 ...