使用 javascript 动态创建表单是否有注意事项？答案

【问题标题】：Are there caveats to dynamicly creating a form with javascript?使用 javascript 动态创建表单是否有注意事项？
【发布时间】：2010-09-16 13:43:48
【问题描述】：

我必须进行跨站点 POST（带有重定向，因此不使用 XMLHTTPRequest），并且基础平台是 ASP.NET。我不想将 ASP.NET FORM 中的所有控件都发布到这个其他站点，所以我正在考虑使用 javascript 动态创建一个新的表单元素并发布它。

有人试过这个技巧吗？有什么注意事项吗？

【问题讨论】：

标签： asp.net javascript forms

【解决方案1】：

我一直这样做。效果很好。但是，您必须手动查看请求的参数，除非您对传递的内容有创意，因为参数不会映射到该页面上的控件。您也可以通过在查询字符串中传递参数以 REST 方式执行此操作，但我更喜欢表单方法来保持我的 URL 干净。请注意，ASP.NET 会忽略所有表单，但它在回发时是自己的，因此我不会费心删除它们。

以下代码的 GridView 模板字段示例：

   <asp:TemplateField HeaderText="Station" SortExpression="Name">
   <ItemTemplate>
      <a href="javascript:void(0);" onclick='Redirector.redirect_with_id("StationDetail.aspx", <%# Eval("StationID") != null ? Eval("StationID") : "-1" %>);return false;'>
      <asp:Label ID="nameLabel" runat="server" Text='<%# Bind("Name") %>' /></a>
   </ItemTemplate>
   </asp:TemplateField>

下面的代码——需要原型：

    // JScript File

   var Redirector = Class.create();

   Redirector.prototype = {
       initialize: function(url,target) {
           this.url = url;
           this.parameters = new Hash();
           this.target = target;
       }, 

    addParameter: function(id,value) {
        this.parameters.set(id, value);
    },

    redirect: function() {
        var form = document.createElement('form');
        document.body.appendChild(form);
        form.action = this.url;
        form.method = "post";
        if (this.target) {
            form.target = this.target;
        }
        this.parameters.each( function(pair) {
            var input = document.createElement('input');
            input.id = pair.key;
            input.name = pair.key;
            input.value = pair.value;
            input.style.display = 'none';
            form.appendChild(input);
        });
        form.submit();
    }
};

Redirector.redirect_with_id = function(url,id,target) {
    var redirector = new Redirector( url, target );
    redirector.addParameter( 'ID', id );
    redirector.redirect();
};

Redirector.redirect_with_tag = function(url,tag_name,tag,target) {
    var redirector = new Redirector( url, target );
    redirector.addParameter( tag_name, tag );
    redirector.redirect();
};

Redirector.redirect_with_tags = function(url,tag_names_comma_separated,tag_values_comma_separated,target) {
    var redirector = new Redirector( url, target );
    var tags = tag_names_comma_separated.split( "," );
    var values = tag_values_comma_separated.split( ",");
    for( var i = 0; i< tags.length; i++ )
    {
        redirector.addParameter( tags[i], values[i] );
    }
    redirector.redirect();
};

【讨论】：

【解决方案2】：

一个警告：您不能使用 innerHTML 将 FORM 标记添加到文档中。您必须通过创建一个新的 DOM 元素来添加它。您可以使用 innerHTML 添加字段，但不能使用表单本身。

【讨论】：

我使用 document.CreateElement 创建表单标签以及表单元素，填充后，我将其附加到 document.body 并提交...效果很好。
你不能？那是特定于浏览器的吗？它在基于 Webkit 的浏览器中运行良好。