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>
  • 相关阅读:
    互联网人25岁毕业 拿一万块钱月薪 (转)
    在windows平台编译openAL Android 库
    lua简单包装
    libevent 简单学习
    cocos2dx中使用tolua++使lua调用c++函数
    《OpenGL超级宝典》编程环境配置
    快速排序、归并排序、堆排序三种算法性能比较
    二叉树的三种遍历的递归与非递归算法
    boost之bind
    boost之内存管理
  • 原文地址:https://www.cnblogs.com/genesis/p/6910832.html
Copyright © 2011-2022 走看看