js动态生成Html元素实现Post操作（createElement）

165 阅读 0 评论 109 点赞

我是靠谱客的博主清新玫瑰，最近开发中收集的这篇文章主要介绍js动态生成Html元素实现Post操作（createElement），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

有时，你需要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();