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>
  • 相关阅读:
    Apache Commons Fileupload 反序列化漏洞分析
    Linux下安装python3.6
    使用salt-stack指定IP添加系统用户为root的权限
    virt-install创建虚拟机并制作成模板
    virsh console 登录CentOS7系统
    Cobbler本机使用VM装机配置方法
    Cobbler自动化部署
    调用python脚本报错/usr/bin/env: python : No such file or directory
    启动keepalived报错(VI_1): received an invalid passwd!
    rsync+sersync实现数据实时同步
  • 原文地址:https://www.cnblogs.com/genesis/p/6910832.html
Copyright © 2011-2022 走看看