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. 《Cracking the Coding Interview》——第8章：面向对象设计——题目1

    2014-04-23 17:32 题目:请设计一个数据结构来模拟一副牌,你要如何用这副牌玩21点呢? 解法:说实话,扑克牌的花样在于各种花色.顺子.连对.三带一.炸弹等等,如果能设计一个数据结构,让判 ...

  2. Synology DS213J 群晖NAS git server架设方法！

    最近单位购入一台Synology  DS213J用作数据存储. 本人打算将一些项目的源代码也放在上面,他本身的套件中心提供了SVN SERVER和GIT SERVER. 设置SVN SERVER非常简 ...

  3. (转)Unreal Shader模块(四): 着色器编译

    本文为(转):Unreal 调试着色器编译过程     调试着色器编译过程 Rolando Caloca 在 April 19, 2016 | 学习编程 Share on Facebook  Shar ...

  4. NTP学习

    NTP(The Network Time Protocol),本以为是一个非常简单的协议,但是看了百度百科和ntp.org的介绍后,我发现我错了. 这个看似简单的协议存在一个很关键也是非常重要的问题- ...

  5. C++ 虚继承内存分配

    我们知道,虚继承的基类在类的层次结构中只可能出现一个实例.虚基类在类的层次结构中的位置是不能固定的,因为继承了虚基类的类可能会再次被其他类多继承. 比如class A: virtual T{} 这时T ...

  6. 如何出发匿名映射呀【log】

    malloc-9711 [002] .... 40794.642938: mm_vmscan_lru_shrink_inactive: nid=0 zid=1 nr_scanned=3 nr_recl ...

  7. Swift中由找不到removeAll(where:)方法引起的连锁反应(上)

    核心代码 section.removeAll {baseRow in if let habitRow = baseRow as? HabitRow{ let idxPath = habitRow.in ...

  8. [poj] 3041 Asteroids || 最小点覆盖=最大二分图匹配

    原题 本题为最小点覆盖,而最小点覆盖=最大二分图匹配 //最小点覆盖:用最少的点(左右两边集合的点)让每条边都至少和其中一个点关联. #include<cstdio> #include&l ...

  9. [poj] 1236 networks of schools

    原题 这是一道强连通分量板子题. 显然subtask1 是要输出入度为0的点的个数 而subtask2,我们考虑一下最优一定是把一个出度为零的点连到入度为零的点上,这样我们要输出的就是max(出度为零 ...

  10. 区间（interval）

    区间(interval) 题目描述 zht有一个长度为n的排列P,现在zht想知道,有多少个由连续整数组成的区间[l,r][l,r]可以由PP中的两个区间[a,b],[c,d]拼出,其中1≤a≤b&l ...