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 相关文章推荐
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
node.js缺少mysql模块运行报错的解决方法
Nov 13 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 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
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
PHP生成压缩文件实例
2015/02/07 PHP
jquery form 隐藏的input 选择
2014/04/29 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
python发送邮件功能实现代码
2016/07/15 Python
python访问抓取网页常用命令总结
2017/04/11 Python
python difflib模块示例讲解
2017/09/13 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
python groupby 函数 as_index详解
2019/12/16 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
中学劳技课教师的自我评价
2014/02/05 职场文书
五四青年节活动总结
2015/02/10 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python