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. 以+scheduledTimerWithTimeInterval...的方式触发的timer，在滑动页面上的列表时，timer会暂定回调，为什么？如何解决？

    这里强调一点:在主线程中以+scheduledTimerWithTimeInterval...的方式触发的timer默认是运行在NSDefaultRunLoopMode模式下的,当滑动页面上的列表时, ...

  2. LDAP操作的两种方案

    最近由于项目需要研究了一下LDAP相关知识,感觉对没接触过的人来说还是有点坑的,所以记录下来给大家分享. 由于是第一次接触,就在网上搜了一些相关的文章,照着示例代码测试,却怎么也连不上LDAP服务器, ...

  3. C# p-Inovke C++动态链接库

    在C++的动态链接库 写了一个测试方法,然后想在C#客户端进行pInvoke调用,始终报异常如下: 试图加载格式不正确的程序. (异常来自 HRESULT:0x8007000B). 最后发现, 需要将 ...

  4. Python 3基础教程10-全局变量和局部变量

    本文来讲讲全局变量和局部变量,前面学习了函数的基本使用,所以,这里就要注意变量的使用和访问权限. 试试下面的demo.py

  5. JMeter学习笔记（九） 参数化2--CSV Data Set Config

    2.CSV Data Set Config 1)添加 CSV Data Set Confi 2)配置CSV Data Set Config 3)添加HTTP请求,引用参数,格式 ${} 4)执行HTT ...

  6. 查看Linux系统用户登录日志

    日志: /var/log/wtmp说明: 此文件是二进制文件,查看方法如下:该日志文件永久记录每个用户登录.注销及系统的启动.停机的事件.因此随着系统正常运行时间的增加,该文件的大小也会越来越大,增加 ...

  7. 孤荷凌寒自学python第三十天python的datetime.datetime模块

     孤荷凌寒自学python第三十天python的datetime.datetime模块 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) datetime.datetime模块包含了:datet ...

  8. 孤荷凌寒自学python第二十二天python类的继承

    孤荷凌寒自学python第二十二天python类的继承 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) python中定义的类可以继承自其它类,所谓继承的概念,我的理解 是,就是一个类B继承自 ...

  9. 原始套接字--traceroute

    traceroute, 也就是 trace route,跟踪路由.这个程序最早是Van Jacobson实现的.源码在网上可以找到,不过我还没有去找.是IP路由过程中对数据包TTL(Time to L ...

  10. JavaSE复习（一）继承多态与常用API

    继承与多态 在父子类的继承关系当中,如果成员变量重名,则创建子类对象时,访问有两种方式: 直接通过子类对象访问成员变量:等号左边是谁,就优先用谁,没有则向上找 间接通过成员方法访问成员变量:该方法属于 ...