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>
  • 相关阅读:
    机器学习 —— 多元线性回归
    利用Python实现kNN算法
    Python下的OpenCV学习 02 —— 图像的读取与保存
    Python下的OpenCV学习 01 —— 在Linux下安装OpenCV
    Linux check whether hyperthreading is enabled or not
    Centos7 安装单节点Torque PBS
    CentOS 7中以runfile形式安装CUDA 9.0
    Linux /etc/profile文件详解
    Linux下Makefile学习笔记
    使用 Eigen 3.3.3 进行矩阵运算
  • 原文地址:https://www.cnblogs.com/genesis/p/6910832.html
Copyright © 2011-2022 走看看