Simulieren Sie das Senden eines Post-Formulars mit einem Funktionsaufruf mit Javascript

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

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

Mit einem AJAX-Funktionsaufruf:

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

Wenn wir verwenden jquery.form.js

$('#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 mithilfe der Methode „POST“ senden.

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

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

Nach diesem Aufruf ist der Effekt genau derselbe wie bei dem Formular, das ich oben habe, und ich sende es auf natürliche Weise synchronisiert ab.

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, sie ist nicht gut genug. Wenn die Felder ein Sonderzeichen oder etwas anderes enthalten, kann es zu einem Fehler kommen.

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

Sie müssen dieses Formular an den HTML-Code anhängen body bevor Sie es einreichen; aktuelle Versionen von Chrome Jetzt brauche ich das.

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

Da die akzeptierte Antwort möglicherweise nicht mehr funktioniert, z Chromium-basierte Browser Unter bestimmten Umständen gibt es hier 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()
}

Ihr einziges Problem besteht darin, dass Sie .serialize nicht zum Erstellen des Arrays verwenden können, da Sie keine Formularfelder zum Abrufen von Daten haben. Sie müssen das Array nur manuell erstellen.

Key1…Keyn können Namen sein, die Sie anstelle von Namensattributen von Formularfeldern zuweisen (das ist es, was die Serialisierung tatsächlich bewirkt), und Werte können beliebig sein:

• HTML aus einem Div;
• von Ihnen berechnete Werte;
• Javascript-Variablen;
• Werte kommen von db;

Der Punkt ist, dass Sie auf keinen Fall das Posten eines Formulars simulieren. Mit Ajax bist du gerecht es asynchron machen Und das hilft Ihnen, weil Sie die Seite nicht ändern/neu laden müssen, um die Formularergebnisse auszuarbeiten.