• 使用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>
  • 相关阅读:
    weblogic静默安装指导
    简单说一下 servlet的生命周期?
    简单讲一下 SpringMVC的执行流程?
    讲一下 Spring的事务传播特性
    Spring事务的隔离级别
    面试资料
    ArrayList 和 HashMap 的默认大小是多数?
    spring-mvc里的 <mvc:resources> 及静态资源访问
    说说Java中的资源文件的读取
    JVM-String常量池与运行时常量池
  • 原文地址:https://www.cnblogs.com/genesis/p/6910832.html
Copyright © 2020-2023  润新知