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 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
Vue router配置与使用分析讲解
Dec 24 Vue.js
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
Win下如何安装PHP的APC拓展
2013/08/07 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
javascript的BOM汇总
2015/07/16 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
Python实现网站表单提交和模板
2019/01/15 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
Python实现序列化及csv文件读取
2020/01/19 Python
python支持多继承吗
2020/06/19 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
新电JAVA笔试题目
2014/08/31 面试题
宿舍保安职务说明书
2014/02/25 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python
Django程序的优化技巧
2021/04/29 Python
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers