zoukankan      html  css  js  c++  java
  • 使用iframe实现页面无刷新提交表单

    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>
  • 相关阅读:
    ubuntu16.04安装配置nagios
    springboot+mybatis+springmvc整合实例
    网站性能优化小结和spring整合redis
    mybatis的批量更新实例
    安装webpack和webpack打包(此文转自Henery)
    微信扫描二维码下载软件
    ubuntu16.04设置tomcat自启动
    无意中在sql日志中发现如下内容,
    实现虚拟模式的动态数据加载Windows窗体DataGridView控件 .net 4.5 (一)
    (C#)WinForm窗体间传值
  • 原文地址:https://www.cnblogs.com/genesis/p/6910832.html
Copyright © 2011-2022 走看看