JavaScript-Post-Anfrage wie ein Formular senden

1530

Ich versuche, einen Browser auf eine andere Seite zu leiten. Wenn ich eine GET-Anfrage haben wollte, könnte ich sagen

document.location.href = 'http://example.com/q=a';

Die Ressource, auf die ich zugreifen möchte, reagiert jedoch nur dann ordnungsgemäß, wenn ich eine POST-Anforderung verwende. Wenn dies nicht dynamisch generiert würde, könnte ich den HTML-Code verwenden

<form action="http://example.com/" method="POST">
  <input type="hidden" name="q" value="a">
</form>

Dann würde ich einfach das Formular vom DOM einreichen.

Aber ich hätte wirklich gerne JavaScript-Code, mit dem ich sagen kann

post_to_url('http://example.com/', {'q':'a'});

Was ist die beste browserübergreifende Implementierung?

Bearbeiten

Es tut mir leid, dass ich nicht klar war. Ich brauche eine Lösung, die den Speicherort des Browsers ändert, genau wie das Senden eines Formulars. Wenn dies mit XMLHttpRequest möglich ist , ist dies nicht offensichtlich. Und dies sollte weder asynchron sein noch XML verwenden, daher ist Ajax nicht die Antwort.

Joseph Holsten
quelle
1
Wie in einem anderen Thread erwähnt, gibt es ein jquery ".redirect" -Plugin, das mit der POST- oder GET-Methode funktioniert. Es erstellt ein Formular mit versteckten Eingaben und sendet es für Sie. Beispiel: $ .redirect ('demo.php', {'arg1': 'value1', 'arg2': 'value2'}); github.com/mgalante/jquery.redirect/blob/master/…
OG Sean

Antworten:

2144

Erstellen Sie <input>s dynamisch in einem Formular und senden Sie es ab

/**
 * sends a request to the specified url from a form. this will change the window location.
 * @param {string} path the path to send the post request to
 * @param {object} params the paramiters to add to the url
 * @param {string} [method=post] the method to use on the form
 */

function post(path, params, method='post') {

  // The rest of this code assumes you are not using a library.
  // It can be made less wordy if you use one.
  const form = document.createElement('form');
  form.method = method;
  form.action = path;

  for (const key in params) {
    if (params.hasOwnProperty(key)) {
      const hiddenField = document.createElement('input');
      hiddenField.type = 'hidden';
      hiddenField.name = key;
      hiddenField.value = params[key];

      form.appendChild(hiddenField);
    }
  }

  document.body.appendChild(form);
  form.submit();
}

Beispiel:

post('/contact/', {name: 'Johnny Bravo'});

EDIT : Da dies so sehr positiv bewertet wurde, schätze ich, dass die Leute dies viel kopieren werden. Also habe ich die hasOwnPropertyPrüfung hinzugefügt , um versehentliche Fehler zu beheben.

Rakesh Pai
quelle
10
Was ist mit Arrays in Datenparametern? Jquery post () interpretiert zB: "data: {array: [1, 2, 3]}" als? Array = 1 & array = 2 & array = 3. Dieser Code liefert ein anderes Ergebnis.
Scit
18
Warnung: Trotz der vielen positiven Stimmen ist diese Lösung begrenzt und verarbeitet keine Arrays oder verschachtelten Objekte innerhalb eines Formulars. Ansonsten ist es eine gute Antwort.
Emragins
3
Erstaunlich, dass dies weder von HTML noch von Javascript nativ unterstützt wird. Sie müssen dies codieren.
Eugene
14
@mricci Der Sinn dieses Snippets besteht darin, den Browser auf eine neue URL umzuleiten, die von der Aktion angegeben wird. Wenn Sie auf derselben Seite bleiben, können Sie Ihre Daten einfach mit herkömmlichem AJAX veröffentlichen. Da der Browser zu einer neuen Seite navigieren sollte, spielt der DOM-Inhalt der aktuellen Seite keine Rolle
Ken Bellows
6
Python-, Django- und wahrscheinlich Flask-Benutzer sehen diesen Fehler: "Verboten (403). CSRF-Überprüfung fehlgeschlagen. Anforderung abgebrochen.", Wenn ein Formular von Null erstellt wird. In diesem Fall müssen Sie das csrf-Token folgendermaßen übergeben: post ('/ contact /', {name: 'Johnny Bravo', csrfmiddlewaretoken: $ ("# csrf_token"). Val ()});
Davidson Lima
129

Dies wäre eine Version der ausgewählten Antwort mit jQuery .

// Post to the provided URL with the specified parameters.
function post(path, parameters) {
    var form = $('<form></form>');

    form.attr("method", "post");
    form.attr("action", path);

    $.each(parameters, function(key, value) {
        var field = $('<input></input>');

        field.attr("type", "hidden");
        field.attr("name", key);
        field.attr("value", value);

        form.append(field);
    });

    // The form needs to be a part of the document in
    // order for us to be able to submit it.
    $(document.body).append(form);
    form.submit();
}
Ryan Delucchi
quelle
2
Behoben: jetzt an document.body anhängen
Ryan Delucchi
7
Dies wurde geringfügig geändert, um Arrays und Objekte zu unterstützen. Gist.github.com/hom3chuk/692bf12fe7dac2486212
НЛО
3
Wenn der Wert ein Dangeours-XML-Zeichen enthält, funktioniert dies nicht in ASP.NET. EncodUriComponent (Wert) ist erforderlich. Dann ist UrlDecode auch auf der Serverseite erforderlich.
Stefan Steiger
Wenn Ihre Anforderungen einfach sind, ist diese Funktion nicht erforderlich. Dieser $("<form method='POST' action='https://example.com'><input type='hidden' name='q' value='a'/></form>").appendTo("body").submit();
Einzeiler
71

Eine einfache, schnelle und schmutzige Implementierung der @ Aaron-Antwort:

document.body.innerHTML += '<form id="dynForm" action="http://example.com/" method="post"><input type="hidden" name="q" value="a"></form>';
document.getElementById("dynForm").submit();

Natürlich sollten Sie lieber ein JavaScript-Framework wie Prototype oder jQuery verwenden ...

Alexandre Victoor
quelle
6
Gibt es eine Möglichkeit, dies zu tun, ohne dass eine Webseite in das aktuelle Browserfenster / die aktuelle Registerkarte geladen wird?
pbreitenbach
54

Verwenden der createElementin dieser Antwort angegebenen Funktion , die aufgrund der Zerbrochenheit des IE mit dem Namensattribut für Elemente erforderlich ist, die normalerweise mit document.createElementfolgenden Elementen erstellt wurden :

function postToURL(url, values) {
    values = values || {};

    var form = createElement("form", {action: url,
                                      method: "POST",
                                      style: "display: none"});
    for (var property in values) {
        if (values.hasOwnProperty(property)) {
            var value = values[property];
            if (value instanceof Array) {
                for (var i = 0, l = value.length; i < l; i++) {
                    form.appendChild(createElement("input", {type: "hidden",
                                                             name: property,
                                                             value: value[i]}));
                }
            }
            else {
                form.appendChild(createElement("input", {type: "hidden",
                                                         name: property,
                                                         value: value}));
            }
        }
    }
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}
Jonny Buchanan
quelle
6
Müssen Sie das Kind nach der Einreichung entfernen? Verschwindet die Seite nicht trotzdem?
Nils
2
Es ist nicht sinnvoll, das Kind nach der Übermittlung zu entfernen, es sei denn, eine Sitzung wird verwendet und diese Daten werden gespeichert.
Miloš
6
@CantucciHQ Die Seite kann genauso gut unverändert bleiben, auch wenn das Formularziel nicht festgelegt ist. Es gibt zum Beispiel 204 No Content .
Eugene Ryabtsev
38

Die Antwort von Rakesh Pai ist erstaunlich, aber es gibt ein Problem, das bei mir (in Safari ) auftritt, wenn ich versuche, ein Formular mit einem Feld namens zu veröffentlichen submit. Zum Beispiel post_to_url("http://google.com/",{ submit: "submit" } );. Ich habe die Funktion leicht gepatcht, um diese variable Raumkollision zu umgehen.

    function post_to_url(path, params, method) {
        method = method || "post";

        var form = document.createElement("form");

        //Move the submit function to another variable
        //so that it doesn't get overwritten.
        form._submit_function_ = form.submit;

        form.setAttribute("method", method);
        form.setAttribute("action", path);

        for(var key in params) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
        }

        document.body.appendChild(form);
        form._submit_function_(); //Call the renamed function.
    }
    post_to_url("http://google.com/", { submit: "submit" } ); //Works!
Kendall Hopkins
quelle
7
2018 und immer noch keine bessere Antwort?
IIirxs
30

Nein. Sie können die JavaScript-Post-Anfrage nicht wie ein Formular senden lassen.

Was Sie haben können, ist ein Formular in HTML, und senden Sie es dann mit dem JavaScript. (wie oft auf dieser Seite erklärt).

Sie können den HTML-Code selbst erstellen. Sie benötigen kein JavaScript, um den HTML-Code zu schreiben. Das wäre dumm, wenn die Leute das vorschlagen würden.

<form id="ninja" action="http://example.com/" method="POST">
  <input id="donaldduck" type="hidden" name="q" value="a">
</form>

Ihre Funktion würde das Formular nur so konfigurieren, wie Sie es möchten.

function postToURL(a,b,c){
   document.getElementById("ninja").action     = a;
   document.getElementById("donaldduck").name  = b;
   document.getElementById("donaldduck").value = c;
   document.getElementById("ninja").submit();
}

Dann benutze es wie.

postToURL("http://example.com/","q","a");

Aber ich würde die Funktion einfach weglassen und einfach tun.

document.getElementById('donaldduck').value = "a";
document.getElementById("ninja").submit();

Schließlich geht die Stilentscheidung in die ccs-Datei.

#ninja{ 
  display:none;
}

Persönlich denke ich, dass Formulare namentlich angesprochen werden sollten, aber das ist momentan nicht wichtig.

gaby de wilde
quelle
26

Wenn Sie Prototype installiert haben, können Sie den Code straffen, um das versteckte Formular wie folgt zu generieren und zu senden:

 var form = new Element('form',
                        {method: 'post', action: 'http://example.com/'});
 form.insert(new Element('input',
                         {name: 'q', value: 'a', type: 'hidden'}));
 $(document.body).insert(form);
 form.submit();
Kopf
quelle
25

Dies ist die Antwort von Rakesh, aber mit Unterstützung für Arrays (was in Formen durchaus üblich ist):

einfaches Javascript:

function post_to_url(path, params, method) {
    method = method || "post"; // Set method to post by default, if not specified.

    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    var addField = function( key, value ){
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", key);
        hiddenField.setAttribute("value", value );

        form.appendChild(hiddenField);
    }; 

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            if( params[key] instanceof Array ){
                for(var i = 0; i < params[key].length; i++){
                    addField( key, params[key][i] )
                }
            }
            else{
                addField( key, params[key] ); 
            }
        }
    }

    document.body.appendChild(form);
    form.submit();
}

Oh, und hier ist die jquery-Version: (etwas anderer Code, läuft aber auf dasselbe hinaus)

function post_to_url(path, params, method) {
    method = method || "post"; // Set method to post by default, if not specified.

    var form = $(document.createElement( "form" ))
        .attr( {"method": method, "action": path} );

    $.each( params, function(key,value){
        $.each( value instanceof Array? value : [value], function(i,val){
            $(document.createElement("input"))
                .attr({ "type": "hidden", "name": key, "value": val })
                .appendTo( form );
        }); 
    } ); 

    form.appendTo( document.body ).submit(); 
}
kritzikratzi
quelle
3
ps Ich genieße jetzt diese Funktion, aber anstatt das Formular am Ende zu senden, sende ich es einfach an den Anrufer zurück. Auf diese Weise kann ich einfach zusätzliche Attribute festlegen oder bei Bedarf andere Dinge damit tun.
kritzikratzi
3
Großartig! sehr hilfreich. Als kleine Änderung für Leute, die sich auf der Serverseite dieses Formulars auf PHP verlassen, habe ich addField (Schlüssel, Parameter [Schlüssel] [i]) in addField (Schlüssel + '[]', Parameter [Schlüssel] [i]) geändert. Dadurch wird der $ _POST [Schlüssel] als Array verfügbar.
Thava
2
@Thava Sie können auch name = "bla []" in Ihr Eingabefeld setzen. Wie auch immer, es gibt andere Sprachen als PHP, die die [] -Syntax nicht unterstützen, also lasse ich dies unverändert.
Kritzikratzi
17

Eine Lösung besteht darin, das Formular zu generieren und einzureichen. Eine Implementierung ist

function post_to_url(url, params) {
    var form = document.createElement('form');
    form.action = url;
    form.method = 'POST';

    for (var i in params) {
        if (params.hasOwnProperty(i)) {
            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = i;
            input.value = params[i];
            form.appendChild(input);
        }
    }

    form.submit();
}

So kann ich mit einem einfachen ein URL-Verkürzungs-Lesezeichen implementieren

javascript:post_to_url('http://is.gd/create.php', {'URL': location.href});
Joseph Holsten
quelle
16

Ich wünschte, ich hätte alle anderen Beiträge gelesen, damit ich keine Zeit verlieren würde, dies aus Rakesh Pais Antwort zu erstellen. Hier ist eine rekursive Lösung, die mit Arrays und Objekten funktioniert. Keine Abhängigkeit von jQuery.

Es wurde ein Segment hinzugefügt, um Fälle zu behandeln, in denen das gesamte Formular wie ein Array gesendet werden soll. (dh wo es kein Wrapper-Objekt um eine Liste von Elementen gibt)

/**
 * Posts javascript data to a url using form.submit().  
 * Note: Handles json and arrays.
 * @param {string} path - url where the data should be sent.
 * @param {string} data - data as javascript object (JSON).
 * @param {object} options -- optional attributes
 *  { 
 *    {string} method: get/post/put/etc,
 *    {string} arrayName: name to post arraylike data.  Only necessary when root data object is an array.
 *  }
 * @example postToUrl('/UpdateUser', {Order {Id: 1, FirstName: 'Sally'}});
 */
function postToUrl(path, data, options) {
    if (options === undefined) {
        options = {};
    }

    var method = options.method || "post"; // Set method to post by default if not specified.

    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    function constructElements(item, parentString) {
        for (var key in item) {
            if (item.hasOwnProperty(key) && item[key] != null) {
                if (Object.prototype.toString.call(item[key]) === '[object Array]') {
                    for (var i = 0; i < item[key].length; i++) {
                        constructElements(item[key][i], parentString + key + "[" + i + "].");
                    }
                } else if (Object.prototype.toString.call(item[key]) === '[object Object]') {
                    constructElements(item[key], parentString + key + ".");
                } else {
                    var hiddenField = document.createElement("input");
                    hiddenField.setAttribute("type", "hidden");
                    hiddenField.setAttribute("name", parentString + key);
                    hiddenField.setAttribute("value", item[key]);
                    form.appendChild(hiddenField);
                }
            }
        }
    }

    //if the parent 'data' object is an array we need to treat it a little differently
    if (Object.prototype.toString.call(data) === '[object Array]') {
        if (options.arrayName === undefined) console.warn("Posting array-type to url will doubtfully work without an arrayName defined in options.");
        //loop through each array item at the parent level
        for (var i = 0; i < data.length; i++) {
            constructElements(data[i], (options.arrayName || "") + "[" + i + "].");
        }
    } else {
        //otherwise treat it normally
        constructElements(data, "");
    }

    document.body.appendChild(form);
    form.submit();
};
Emragine
quelle
1
Dies scheint auch verschachtelte Objekte nicht richtig zu codieren.
Mpen
1
@mpen hast du eine Geige?
Emragins
1
Nein Entschuldigung. Es war leicht genug, mich selbst zu schreiben; die Zeit zum Debuggen nicht wert.
Mpen
12

Drei Möglichkeiten hier.

  1. Standard JavaScript Antwort: Verwenden Sie ein Framework! Die meisten Ajax-Frameworks haben Sie auf einfache Weise abstrahiert, um einen XMLHTTPRequest- POST zu erstellen .

  2. Stellen Sie die XMLHTTPRequest-Anforderung selbst und übergeben Sie den Beitrag an die open-Methode, anstatt get. (Weitere Informationen finden Sie unter Verwenden der POST-Methode in XMLHTTPRequest (Ajax) .)

  3. Erstellen Sie über JavaScript dynamisch ein Formular, fügen Sie eine Aktion hinzu, fügen Sie Ihre Eingaben hinzu und senden Sie diese.

Alan Storm
quelle
5
XMLHTTPRequest aktualisiert das Fenster nicht. Versuchen Sie zu sagen, dass ich mit dem AJAX mit einem document.write (http.responseText) enden soll?
Joseph Holsten
11
Warum sollte man seinem Projekt mehr als 30.000 hinzufügen, wenn er nichts anderes mit dem Framework macht?
Dementic
12

Ich würde den Ajax-Weg gehen, wie andere vorgeschlagen hatten, mit:

var xmlHttpReq = false;

var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
    self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
    self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}

self.xmlHttpReq.open("POST", "YourPageHere.asp", true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

self.xmlHttpReq.setRequestHeader("Content-length", QueryString.length);



self.xmlHttpReq.send("?YourQueryString=Value");
Katy
quelle
1
Nicht erfasster Referenzfehler: QueryString ist nicht definiert.
Chase Roberts
11

Der einfachste Weg ist die Verwendung von Ajax Post Request:

$.ajax({
    type: "POST",
    url: 'http://www.myrestserver.com/api',
    data: data,
    success: success,
    dataType: dataType
    });

wo:

  • Daten sind ein Objekt
  • Datentyp sind die vom Server erwarteten Daten (XML, JSON, Skript, Text, HTML).
  • url ist die Adresse Ihres RESt-Servers oder einer Funktion auf der Serverseite, die den HTTP-POST akzeptiert.

Leiten Sie dann im Success-Handler den Browser mit so etwas wie window.location um.

JLavoie
quelle
5
Sie haben nicht erwähnt, dass der von Ihnen angebotene Ansatz auf der jQuery- JavaScript-Bibliothek basiert .
DavidRR
8
Sie haben auch den Punkt der Frage verpasst - er möchte "einen Browser auf eine andere Seite leiten" und keine Ajax-Anfrage stellen.
Schwarz
Sie könnten auf die Antwort warten und dann document.location = {url}; Ich kann mir nur vorstellen, dass dies nicht funktioniert, wenn Sie zu einem Dateidownload umleiten.
Epirocks
11

So habe ich es mit jQuery geschrieben. Getestet in Firefox und Internet Explorer.

function postToUrl(url, params, newWindow) {
    var form = $('<form>');
    form.attr('action', url);
    form.attr('method', 'POST');
    if(newWindow){ form.attr('target', '_blank'); 
  }

  var addParam = function(paramName, paramValue) {
      var input = $('<input type="hidden">');
      input.attr({ 'id':     paramName,
                 'name':   paramName,
                 'value':  paramValue });
      form.append(input);
    };

    // Params is an Array.
    if(params instanceof Array){
        for(var i=0; i<params.length; i++) {
            addParam(i, params[i]);
        }
    }

    // Params is an Associative array or Object.
    if(params instanceof Object) {
        for(var key in params){
            addParam(key, params[key]);
        }
    }

    // Submit the form, then remove it from the page
    form.appendTo(document.body);
    form.submit();
    form.remove();
}
Beauburrier
quelle
1
Hat für mich gearbeitet. Vielen Dank. (Getestet in Chrome)
dannie.f
2
Ich denke, das Problem hier könnte sein, dass das Formular entfernt wird, bevor die Übermittlung zurückkehrt. Ich habe gehört, dass in einigen Browsern die Handler nicht ausgelöst werden, wenn Sie das Formular vor Abschluss der Übermittlung verschieben oder entfernen. Entfernen Sie stattdessen das Formular aus dem Dokument im Handler.
Jeff DQ
Klappt wunderbar. Getestet auf Firefox + Chrome + IE11 - Vielen Dank dafür!
Deunz
6

Die Prototypbibliothek enthält ein Hashtable-Objekt mit der Methode ".toQueryString ()", mit der Sie ein JavaScript-Objekt / eine JavaScript-Struktur einfach in eine Zeichenfolge im Stil einer Abfragezeichenfolge umwandeln können. Da für den Beitrag der "Hauptteil" der Anforderung eine mit einer Abfragezeichenfolge formatierte Zeichenfolge sein muss, kann Ihre Ajax-Anforderung ordnungsgemäß als Beitrag verwendet werden. Hier ist ein Beispiel mit Prototype:

$req = new Ajax.Request("http://foo.com/bar.php",{
    method: 'post',
    parameters: $H({
        name: 'Diodeus',
        question: 'JavaScript posts a request like a form request',
        ...
    }).toQueryString();
};
Adam Ness
quelle
1
Diese Lösung ist eine der wenigen, die das aktuell angezeigte Dokument nicht durch die Rückgabe der Serverantwort ersetzt.
Dothebart
4

Das funktioniert in meinem Fall perfekt:

document.getElementById("form1").submit();

Sie können es in folgenden Funktionen verwenden:

function formSubmit() {
     document.getElementById("frmUserList").submit();
} 

Hiermit können Sie alle Werte von Eingaben veröffentlichen.

Chintan Thummar
quelle
3

Noch eine rekursive Lösung, da einige von anderen kaputt zu sein scheinen (ich habe nicht alle getestet). Dieser hängt von lodash 3.x und ES6 ab (jQuery nicht erforderlich):

function createHiddenInput(name, value) {
    let input = document.createElement('input');
    input.setAttribute('type','hidden');
    input.setAttribute('name',name);
    input.setAttribute('value',value);
    return input;
}

function appendInput(form, name, value) {
    if(_.isArray(value)) {
        _.each(value, (v,i) => {
            appendInput(form, `${name}[${i}]`, v);
        });
    } else if(_.isObject(value)) {
        _.forOwn(value, (v,p) => {
            appendInput(form, `${name}[${p}]`, v);
        });
    } else {
        form.appendChild(createHiddenInput(name, value));
    }
}

function postToUrl(url, data) {
    let form = document.createElement('form');
    form.setAttribute('method', 'post');
    form.setAttribute('action', url);

    _.forOwn(data, (value, name) => {
        appendInput(form, name, value);
    });

    form.submit();
}
mpen
quelle
3

Meine Lösung codiert tief verschachtelte Objekte, im Gegensatz zu der derzeit von @RakeshPai akzeptierten Lösung.

Es verwendet die 'qs' npm-Bibliothek und ihre Stringify-Funktion, um verschachtelte Objekte in Parameter umzuwandeln.

Dieser Code funktioniert gut mit einem Rails-Backend, obwohl Sie ihn ändern sollten, um mit jedem benötigten Backend zu arbeiten, indem Sie die an stringify übergebenen Optionen ändern. Für Rails muss arrayFormat auf "Klammern" gesetzt sein.

import qs from "qs"

function normalPost(url, params) {
  var form = document.createElement("form");
  form.setAttribute("method", "POST");
  form.setAttribute("action", url);

  const keyValues = qs
    .stringify(params, { arrayFormat: "brackets", encode: false })
    .split("&")
    .map(field => field.split("="));

  keyValues.forEach(field => {
    var key = field[0];
    var value = field[1];
    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", key);
    hiddenField.setAttribute("value", value);
    form.appendChild(hiddenField);
  });
  document.body.appendChild(form);
  form.submit();
}

Beispiel:

normalPost("/people/new", {
      people: [
        {
          name: "Chris",
          address: "My address",
          dogs: ["Jordan", "Elephant Man", "Chicken Face"],
          information: { age: 10, height: "3 meters" }
        },
        {
          name: "Andrew",
          address: "Underworld",
          dogs: ["Doug", "Elf", "Orange"]
        },
        {
          name: "Julian",
          address: "In a hole",
          dogs: ["Please", "Help"]
        }
      ]
    });

Erzeugt diese Rails-Parameter:

{"authenticity_token"=>"...",
 "people"=>
  [{"name"=>"Chris", "address"=>"My address", "dogs"=>["Jordan", "Elephant Man", "Chicken Face"], "information"=>{"age"=>"10", "height"=>"3 meters"}},
   {"name"=>"Andrew", "address"=>"Underworld", "dogs"=>["Doug", "Elf", "Orange"]},
   {"name"=>"Julian", "address"=>"In a hole", "dogs"=>["Please", "Help"]}]}
cmrichards
quelle
2

FormObject ist eine Option. Aber FormObject wird derzeit von den meisten Browsern nicht unterstützt.

lingceng
quelle
1

Dies ist wie Alans Option 2 (oben). Wie man den httpobj instanziiert, bleibt als Übung übrig.

httpobj.open("POST", url, true);
httpobj.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
httpobj.onreadystatechange=handler;
httpobj.send(post);
Robert Van Hoose
quelle
1

Dies basiert auf dem Code von beauSD mit jQuery. Es wurde verbessert, sodass es rekursiv für Objekte funktioniert.

function post(url, params, urlEncoded, newWindow) {
    var form = $('<form />').hide();
    form.attr('action', url)
        .attr('method', 'POST')
        .attr('enctype', urlEncoded ? 'application/x-www-form-urlencoded' : 'multipart/form-data');
    if(newWindow) form.attr('target', '_blank');

    function addParam(name, value, parent) {
        var fullname = (parent.length > 0 ? (parent + '[' + name + ']') : name);
        if(value instanceof Object) {
            for(var i in value) {
                addParam(i, value[i], fullname);
            }
        }
        else $('<input type="hidden" />').attr({name: fullname, value: value}).appendTo(form);
    };

    addParam('', params, '');

    $('body').append(form);
    form.submit();
}
Bobef
quelle
1

Sie können das Formular dynamisch mit DHTML hinzufügen und dann senden.

AnthonyWJones
quelle
1

Ich benutze das document.forms Java und schleife es, um alle Elemente im Formular zu erhalten, und sende es dann über xhttp. Das ist also meine Lösung für Javascript / Ajax Submit (mit allem HTML als Beispiel):

          <!DOCTYPE html>
           <html>
           <body>
           <form>
       First name: <input type="text" name="fname" value="Donald"><br>
        Last name: <input type="text" name="lname" value="Duck"><br>
          Addr1: <input type="text" name="add" value="123 Pond Dr"><br>
           City: <input type="text" name="city" value="Duckopolis"><br>
      </form> 



           <button onclick="smc()">Submit</button>

                   <script>
             function smc() {
                  var http = new XMLHttpRequest();
                       var url = "yourphpfile.php";
                     var x = document.forms[0];
                          var xstr = "";
                         var ta ="";
                    var tb ="";
                var i;
               for (i = 0; i < x.length; i++) {
     if (i==0){ta = x.elements[i].name+"="+ x.elements[i].value;}else{
       tb = tb+"&"+ x.elements[i].name +"=" + x.elements[i].value;
             } }

           xstr = ta+tb;
      http.open("POST", url, true);
       http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

      http.onreadystatechange = function() {
          if(http.readyState == 4 && http.status == 200) {

        // do whatever you want to with the html output response here

                } 

               }
            http.send(xstr);

              }
         </script>

         </body>
     </html>
drtechno
quelle
1

Sie können die Trigger-Methode von jQuery verwenden, um das Formular zu senden, genau wie Sie eine Taste drücken.

$('form').trigger('submit')

es wird im Browser gesendet.

Kanaan Etai
quelle
0

Die Methode, mit der ich einen Benutzer automatisch poste und auf eine andere Seite leite, besteht darin, einfach ein verstecktes Formular zu schreiben und es dann automatisch zu senden. Seien Sie versichert, dass das versteckte Formular absolut keinen Platz auf der Webseite einnimmt. Der Code wäre ungefähr so:

    <form name="form1" method="post" action="somepage.php">
    <input name="fielda" type="text" id="fielda" type="hidden">

    <textarea name="fieldb" id="fieldb" cols="" rows="" style="display:none"></textarea>
</form>
    document.getElementById('fielda').value="some text for field a";
    document.getElementById('fieldb').innerHTML="some text for multiline fieldb";
    form1.submit();

Anwendung der automatischen Übermittlung

Eine Anwendung einer automatischen Übermittlung würde Formularwerte, die der Benutzer automatisch auf der anderen Seite eingibt, auf diese Seite zurückleiten. Eine solche Anwendung wäre wie folgt:

fieldapost=<?php echo $_post['fielda'];>
if (fieldapost !="") {
document.write("<form name='form1' method='post' action='previouspage.php'>
  <input name='fielda' type='text' id='fielda' type='hidden'>
</form>");
document.getElementById('fielda').value=fieldapost;
form1.submit();
}
Rauprog
quelle
0

Hier ist, wie ich es mache.

function redirectWithPost(url, data){
        var form = document.createElement('form');
        form.method = 'POST';
        form.action = url;

        for(var key in data){
            var input = document.createElement('input');
            input.name = key;
            input.value = data[key];
            input.type = 'hidden';
            form.appendChild(input)
        }
        document.body.appendChild(form);
        form.submit();
    }
Nikksan
quelle
0

Keine der oben genannten Lösungen hat tief verschachtelte Parameter nur mit jQuery verarbeitet. Hier ist meine Zwei-Cent-Lösung.

Wenn Sie jQuery verwenden und tief verschachtelte Parameter verarbeiten müssen, können Sie die folgende Funktion verwenden:

    /**
     * Original code found here: https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js
     * I just simplified it for my own taste.
     */
    function postForm(parameters, url) {

        // generally we post the form with a blank action attribute
        if ('undefined' === typeof url) {
            url = '';
        }


        //----------------------------------------
        // SOME HELPER FUNCTIONS
        //----------------------------------------
        var getForm = function (url, values) {

            values = removeNulls(values);

            var form = $('<form>')
                .attr("method", 'POST')
                .attr("action", url);

            iterateValues(values, [], form, null);
            return form;
        };

        var removeNulls = function (values) {
            var propNames = Object.getOwnPropertyNames(values);
            for (var i = 0; i < propNames.length; i++) {
                var propName = propNames[i];
                if (values[propName] === null || values[propName] === undefined) {
                    delete values[propName];
                } else if (typeof values[propName] === 'object') {
                    values[propName] = removeNulls(values[propName]);
                } else if (values[propName].length < 1) {
                    delete values[propName];
                }
            }
            return values;
        };

        var iterateValues = function (values, parent, form, isArray) {
            var i, iterateParent = [];
            Object.keys(values).forEach(function (i) {
                if (typeof values[i] === "object") {
                    iterateParent = parent.slice();
                    iterateParent.push(i);
                    iterateValues(values[i], iterateParent, form, Array.isArray(values[i]));
                } else {
                    form.append(getInput(i, values[i], parent, isArray));
                }
            });
        };

        var getInput = function (name, value, parent, array) {
            var parentString;
            if (parent.length > 0) {
                parentString = parent[0];
                var i;
                for (i = 1; i < parent.length; i += 1) {
                    parentString += "[" + parent[i] + "]";
                }

                if (array) {
                    name = parentString + "[" + name + "]";
                } else {
                    name = parentString + "[" + name + "]";
                }
            }

            return $("<input>").attr("type", "hidden")
                .attr("name", name)
                .attr("value", value);
        };


        //----------------------------------------
        // NOW THE SYNOPSIS
        //----------------------------------------
        var generatedForm = getForm(url, parameters);

        $('body').append(generatedForm);
        generatedForm.submit();
        generatedForm.remove();
    }

Hier ist ein Beispiel für die Verwendung. Der HTML-Code:

<button id="testButton">Button</button>

<script>
    $(document).ready(function () {
        $("#testButton").click(function () {
            postForm({
                csrf_token: "abcd",
                rows: [
                    {
                        user_id: 1,
                        permission_group_id: 1
                    },
                    {
                        user_id: 1,
                        permission_group_id: 2
                    }
                ],
                object: {
                    apple: {
                        color: "red",
                        age: "23 days",
                        types: [
                            "golden",
                            "opal",
                        ]
                    }
                },
                the_null: null, // this will be dropped, like non-checked checkboxes are dropped
            });
        });
    });
</script>

Wenn Sie auf die Schaltfläche Test klicken, wird das Formular veröffentlicht und in POST werden die folgenden Werte angezeigt:

array(3) {
  ["csrf_token"] => string(4) "abcd"
  ["rows"] => array(2) {
    [0] => array(2) {
      ["user_id"] => string(1) "1"
      ["permission_group_id"] => string(1) "1"
    }
    [1] => array(2) {
      ["user_id"] => string(1) "1"
      ["permission_group_id"] => string(1) "2"
    }
  }
  ["object"] => array(1) {
    ["apple"] => array(3) {
      ["color"] => string(3) "red"
      ["age"] => string(7) "23 days"
      ["types"] => array(2) {
        [0] => string(6) "golden"
        [1] => string(4) "opal"
      }
    }
  }
}

Hinweis: Wenn Sie das Formular an eine andere URL als die aktuelle Seite senden möchten, können Sie die URL als zweites Argument der Funktion postForm angeben.

Also zum Beispiel (um Ihr Beispiel wiederzuverwenden):

postForm({'q':'a'}, 'http://example.com/');

Hoffe das hilft.

Hinweis 2: Der Code wurde aus dem Redirect-Plugin übernommen . Ich habe es im Grunde nur für meine Bedürfnisse vereinfacht.

Leng
quelle
-1

jQuery-Plugin zur Umleitung mit POST oder GET:

https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js

Fügen Sie zum Testen die obige .js-Datei hinzu oder kopieren / fügen Sie die Klasse in Ihren Code ein. Verwenden Sie dann den Code hier und ersetzen Sie "args" durch Ihre Variablennamen und "values" durch die Werte der jeweiligen Variablen:

$.redirect('demo.php', {'arg1': 'value1', 'arg2': 'value2'});
OG Sean
quelle
Dies wurde auch hier erwähnt: stackoverflow.com/questions/8389646/…
OG Sean
Diese Lösung läuft für uns immer noch einwandfrei. Wenn Sie sie abgelehnt haben, hinterlassen Sie bitte einen Kommentar, warum.
OG Sean
-2

Sie können einen AJAX-Aufruf tätigen (wahrscheinlich mithilfe einer Bibliothek wie Prototype.js oder JQuery). AJAX kann sowohl GET- als auch POST-Optionen verarbeiten.

Diodeus - James MacFarlane
quelle
5
Die Verwendung von XMLHttpRequest würde den Browser nicht auf eine andere Seite leiten.
Jonny Buchanan