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 相关文章推荐
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
如何正确理解vue中的key详解
Nov 02 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
php实现计数器方法小结
2015/01/05 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
javascript实现节点(div)名称编辑
2014/12/17 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
南京某公司笔试题
2013/01/27 面试题
数控技术与应用毕业生自荐信
2013/09/24 职场文书
社会实践心得体会
2014/01/03 职场文书
医师定期考核实施方案
2014/05/07 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
python实现双链表
2022/05/25 Python