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 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
textContent在Firefox下与innerText等效的属性
May 12 Javascript
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
clipboard在vue中的使用的方法示例
Oct 19 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
vue里使用create, mounted调用方法
Apr 26 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
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
javaScript call 函数的用法说明
2010/04/09 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
浅谈python之新式类
2018/08/12 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
Python短信轰炸的代码
2020/03/25 Python
Django REST 异常处理详解
2020/07/15 Python
python如何实现图片压缩
2020/09/11 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
python3中for循环踩过的坑记录
2020/12/14 Python
numba提升python运行速度的实例方法
2021/01/25 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
计算机专业毕业生自荐书
2014/06/02 职场文书
战友聚会策划方案
2014/06/13 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js