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 相关文章推荐
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
AngularJS路由实现页面跳转实例
Mar 03 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 Javascript
使用Vue实现一个树组件的示例
Nov 06 Javascript
JavaScript的一些小技巧分享
Jan 06 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
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
Vue实现简单计算器
2021/01/20 Vue.js
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
Python插件机制实现详解
2020/05/04 Python
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
实习求职信
2013/12/01 职场文书
工作自我评价怎么写
2014/01/29 职场文书
家长对学生的评语
2014/04/18 职场文书
活动总结怎么写啊
2014/05/07 职场文书
模具专业自荐信
2014/05/29 职场文书
集体生日活动方案
2014/08/18 职场文书
车贷收入证明范本
2014/09/14 职场文书
预备党员个人总结
2015/02/14 职场文书
win sever 2022如何占用操作主机角色
2022/06/25 Servers