js动态生成Html元素实现Post操作(createElement)


Posted in Javascript onSeptember 14, 2015

有时,你需要Post数据到另一个页面上,那么你就需要构建一个Form表单

<form id="postform" name="postform" method="post">
<input name="msg" value=""/>
</form>
document.write("<form ..."

//document.write("<iframe src=\"about:blank\" name=\"hiddenFrame\" id=\"hiddenFrame\" width=\"0\" height=\"0\" frameborder=\"0\"></iframe>");

用如下js提交不起作用,因为打到页面上的form不是一个对象,而是一个字符串

//  theForm.action = "http://msg.baihe.com/tortoise/pages/tortoise/sm_gb2312.jsp?ReturnURL="+strReturnURL;
//  document.getElementById("Pathid").value="3070";
//  document.getElementById("Title").value="你好!";
//  document.getElementById("Content").value="我把你设为重点关注了,咱们聊聊吧:)";
//  document.getElementById("CloseWindow").value="1";

所以你需要自己动态创建form对象,用如下方法实现:

var form_feedback = document.createElement("form");
  document.body.appendChild(form_feedback);
    
  var i = document.createElement("input");
  i.type = "hidden";
  i.name = "Title";
  i.value = "你好!";
  form_feedback.appendChild(i);
  
  
  var j=document.createElement("input");
  j.type="hidden";
  j.name="Content";
  j.value="我把你设为重点关注了,咱们聊聊吧:)";
  form_feedback.appendChild(j);
  
  var hiddenIframe=document.createElement("iframe");
  hiddenIframe.src="about:blank";
  hiddenIframe.name="hiddenFrame";
  hiddenIframe.id="hiddenFrame";
  hiddenIframe.width="0";
  hiddenIframe.height="0";
  hiddenIframe.frameborder="0";
  form_feedback.appendChild(hiddenIframe);
  
  
  form_feedback.action = "http://msg.baihe.com/tortoise/pages/tortoise/sm_gb2312.jsp?ReturnURL=";
  form_feedback.target = "hiddenFrame";
  form_feedback.method = "post";
  form_feedback.submit();
Javascript 相关文章推荐
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 Javascript
javascript 面向对象编程基础:继承
Aug 21 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
jQuery中队列queue()函数的实例教程
May 03 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
Vuex提升学习篇
Jan 11 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
详解vuex状态管理模式
Nov 01 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
Vue绑定用户接口实现代码示例
Nov 04 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 #Javascript
JS动态添加iframe的代码
Sep 14 #Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 #Javascript
window.onload使用指南
Sep 13 #Javascript
JS+CSS简单树形菜单实现方法
Sep 12 #Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 #Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 #Javascript
You might like
第四节--构造函数和析构函数
2006/11/16 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
篮球比赛口号
2014/06/10 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android
Java Redisson多策略注解限流
2022/09/23 Java/Android