wake-up-neo.com

Simulieren Sie das Senden eines Formulars mit einem Funktionsaufruf mit Javascript

Mit jQuery können wir das Senden eines Formulars simulieren:

<form id="form1" method="post">
    <input name="key1" value="value1" />
    <input name="key2" value="value2" />
</form>

Mit einem Funktionsaufruf AJAX:

$.post('', { key1: 'value1', key2: 'value2' }, function() {
   // do call back
});

Wenn wir jquery.form.js verwenden

$('#form1').ajaxSubmit({
    success: function() {
        // do call back
    }
});

Ok, jetzt kommt meine Frage:

Ich habe das Formular nicht im Markup und möchte ein Formular mit dynamischem Inhalt mit der Methode 'POST' einreichen.

Ich möchte einen Funktionsaufruf ausführen, um die Prozedur zu simulieren, vielleicht etwas wie:

utils.post('/url', {key1: 'value1', key2: 'value2'});

Nach diesem Aufruf ist der Effekt genau derselbe, den ich oben habe, und ich übermittle ihn auf natürliche Weise.

Gibt es eine schöne Möglichkeit, dies zu tun?


Wenn das Problem nicht klar ist, kann ich ein hässliches Beispiel machen, um zu erklären, was ich will:

util.post = function(url, fields) {
    var $form = $('<form action="'+url+'" method="post"></form>');
    var key, val;
    for(key in fields) {
        if(fields.hasOwnProperty(key)) {
            val = fields[key];
            $form.append('<input type="hidden" name="'+key+'" value="'+val+'" />');
        }
    }
    $form.submit();
}

Die obige Methode funktioniert, aber ich denke es ist nicht schön genug. Wenn die Felder ein Sonderzeichen oder etwas anderes haben, kann dies zu einem Fehler führen.

13
Alfred Huang

Sie können jQuery verwenden, um das Formular funktional zu erstellen, anstatt Strings zu verketten, sodass Sonderzeichen kein Problem darstellen.

Sie müssen dieses Formular vor dem Senden an die HTML-Variable body anhängen. Neueste Versionen von Chrome erfordern jetzt diese .

var util = {};
util.post = function(url, fields) {
    var $form = $('<form>', {
        action: url,
        method: 'post'
    });
    $.each(fields, function(key, val) {
         $('<input>').attr({
             type: "hidden",
             name: key,
             value: val
         }).appendTo($form);
    });
    $form.appendTo('body').submit();
}
26
Barmar

Da die akzeptierte Antwort möglicherweise nicht mehr z. Chromium-basierte Browser In einigen Fällen gibt es eine Problemumgehung:

util.post = function(url, fields) {
  var $form = $('<form>', {
    action: url,
    method: 'post'
  }).append(
    $.map(fields, function(key, val) {
      return $('<input>').attr({
         type: "hidden",
         name: key,
         value: val
      }).appendTo($form);
    })
  )
  var w = window.open("about:blank")
  w.document.write($form[0].outerHTML)
  w.document.forms[0].submit()
}
1
Brian M. Hunt

Ihr einziges Problem ist, dass Sie nicht .serialize zum Erstellen des Arrays verwenden können, da Sie keine Formularfelder haben, über die Daten abgerufen werden können. Sie müssen das Array nur manuell erstellen.

Key1 ... Keyn können Namen sein, die Sie anstelle von Formularfeldern Namensattributen zuweisen (dies ist die eigentliche Funktion von serialize), und Werte können sein, was Sie wollen:

  • html aus einem div;
  • von Ihnen berechnete Werte;
  • javascript-Variablen;
  • werte, die von DB kommen;

Der Punkt ist, dass Sie in keinem Fall ein Formular simulieren. Mit ajax sind Sie nur machen es asynchron und dies hilft Ihnen, da Sie die Seite nicht ändern/neu laden müssen, um die Formularergebnisse zu erarbeiten.

0
Lelio Faieta