zoukankan      html  css  js  c++  java
  • 模拟form提交数据

    最近在做一个项目,发现ajax不能enctype=”multipart/form-data” 属性的表单,没办法,只能使用form表单直接提交的方法了,但是form表单直接提交会跳转页面,这样很不友好,也不是项目需求,于是上网搜索了一番,发现可以使用隐藏的iframe来实现。

    具体的原理是form表单提交到iframe里面处理,而这个iframe是隐藏的,所以提交表单的时候当前页面没有发生任何变化。

    <form method="POST" action="../upload" enctype="multipart/form-data" target='frameFile1' id="form1"> 
        <input type="file" name="file" id="myphoto">
        <input type="submit" value="提交">
    </form>
    <iframe name='frameFile1' style='display: none;'></iframe>

    最重要的就是form的target属性指向iframe的name值,这样就实现了提交到隐藏的iframe中,那么返回值应该怎么获取呢?

    target 自定义名字 ----- 出现于框架结构,将会在该名称的框架内打开链接

    var frame1 = document.getElementById("frameFile1").contentDocument; //获取到iframe里面的html元素
    var frameJson1 = JSON.parse($(frame1).find('pre').html()); //根据获取到的元素进行相应的操作

    这样的话基本上可以模拟ajax的操作,实现无刷新提交表单。

  • 相关阅读:
    冲刺(六)
    冲刺(五)
    冲刺(四)
    团队产品开发
    冲刺(三)
    冲刺(二)
    冲刺(一)
    电梯演讲,模型展示
    校园健康行的NABCD分析
    团队博客
  • 原文地址:https://www.cnblogs.com/taoze/p/4532379.html
Copyright © 2011-2022 走看看