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的事件描述
Sep 08 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 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
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
C# Assembly类访问程序集信息
2009/06/13 PHP
奇怪的PHP引用效率问题分析
2012/03/23 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
Python 列表的清空方式
2020/01/13 Python
工厂门卫岗位职责
2013/11/25 职场文书
高级工程师岗位职责
2013/12/15 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
党员发展大会主持词
2015/07/03 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
施工安全责任协议书
2016/03/23 职场文书
Golang 并发下的问题定位及解决方案
2022/03/16 Golang
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python