2025年3月30日 星期日 甲辰(龙)年 月廿九 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

iframe标签实现form表单提交下载文件

时间:07-30来源:作者:点击数:31
一、表单提交的代码常规写法
  • <iframe name="testIframeName" style="display:none;"></iframe>
  • <form target="testIframeName" method="post" action="xxxx.do">
  • <input type="text" name="username"/>
  • <input type="password" name="password"/>
  • <input type="submit" value=" 提 交 " />
  • </form>
二、替换成全部隐藏的代码写法
  • form表格的target属性的值对应上iframe的name属性值
  • $("#downLoadIFrame").remove();
  • var $Iframe = $("<iframe>");
  • $Iframe.attr("name", "downLoadIFrame");
  • $Iframe.attr("id", "downLoadIFrame");
  • $Iframe.attr("style", "diaplay:none");
  • $("body").append($Iframe);
  • var $form = $("<form>");
  • $form.empty();
  • $form.attr("style", "diaplay:none");
  • $form.attr("target", "downLoadIFrame"); // 对应iframe的name属性值
  • $form.attr("method", "post");
  • $form.attr("action", "xxxxx.do"); // 指向后端请求链接
  • $("body").append($form);
  • // 新建input, 并设置name属性和value的值
  • var $input = $("<input>");
  • $input.attr("type", "hidden");
  • $input.attr("name", "xyz"); // 填上后台对应的name字段
  • $input.attr("value", "xxxxxyyyyzzzz"); // 填上传的值
  • $form.append($input);
  • $form.submit();
  • // 监听iframe回调
  • $Iframe.on("load", function() {
  • var contentWin = document.getElementById("downLoadIFrame").contentWindow;
  • var backBodyText = contentWin.document.body.innerText;
  • $Iframe.remove();
  • });
  • $Iframe.remove();
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门