使用javascript动态创建表单需要注意哪些事项

Are there caveats to dynamicly creating a form with javascript?

本文关键字：动态 javascript 创建 表单 使用      更新时间：2023-09-26

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

有人试过这个把戏吗？有什么需要注意的吗？

我一直都这么做。效果真的很好。不过，你必须手动查看请求的参数，除非你对传递的内容有创意，因为参数不会映射到该页面上的控件上。您也可以通过在查询字符串中传递参数以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();
};

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

相关文章：