Существуют ли предостережения относительно динамического создания формы с помощью JavaScript?

Question

Я должен сделать POST для нескольких сайтов (с перенаправлением, поэтому не использую XMLHTTPRequest), а базовая платформа - ASP.NET. Я не хочу размещать все элементы управления в ASP.NET FORM на этом другом сайте, поэтому я подумывал о том, чтобы динамически создать новый элемент формы с использованием javascript и просто опубликовать его.

Кто-нибудь пробовал этот трюк? Есть ли какие-то предостережения?

Answer 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();
};

Answer 2

Одно предостережение: вы не можете добавить тег FORM к документу, используя innerHTML. Вы должны добавить его, создав новый элемент DOM. Вы можете добавлять поля, используя innerHTML, но не саму форму.