JavaScript-Post-Anfrage wie das Absenden eines Formulars

StackOverflow https://stackoverflow.com/questions/133925

Frage

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

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

Aber die Ressource, auf die ich zugreifen möchte, reagiert nicht richtig, es sei denn, ich verwende eine POST-Anfrage.Wenn dies nicht dynamisch generiert würde, würde ich möglicherweise den HTML-Code verwenden

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

Dann würde ich das Formular einfach aus dem DOM einreichen.

Aber ich hätte wirklich gerne JavaScript-Code, der es mir erlaubt, etwas zu sagen

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

Was ist die beste browserübergreifende Implementierung?

Bearbeiten

Es tut mir leid, dass ich mich nicht klar ausgedrückt habe.Ich benötige eine Lösung, die den Speicherort des Browsers ändert, genau wie das Absenden eines Formulars.Wenn dies möglich ist mit XMLHttpRequest, es ist nicht offensichtlich.Und dies sollte weder asynchron sein noch XML verwenden, daher ist Ajax nicht die Antwort.

War es hilfreich?

Lösung

Dynamisch <input>s in einem Formular erstellen und

einreichen 
/**
 * 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'});

Bearbeiten : Da dies so viel upvoted bekommen hat, werde ich bin zu raten Menschen, Copy- Einfügen dieses viel. So habe ich die hasOwnProperty überprüfen alle unbeabsichtigte Fehler zu beheben.

Andere Tipps

Dies würde 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();
}

Eine einfache schnelle und unsaubere Implementierung von @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 einen JavaScript-Framework verwenden, wie zum Beispiel Prototype oder jQuery ...

Mit der createElement Funktion zur Verfügung gestellt in diese Antwort , die aufgrund IE Gebrochen mit dem Namen auf Elemente erstellt normalerweise mit document.createElement Attribute: 

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

Rakesh Pai Antwort ist erstaunlich, aber für mich gibt es ein Problem, das (in Safari ), wenn ich versuche zu schreiben auftritt ein Formular mit einem Feld namens submit. Zum Beispiel post_to_url("http://google.com/",{ submit: "submit" } );. Ich habe gepatcht leicht die Funktion, um diesen variablen Raum Kollision zu gehen. 

    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!

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

Sie können ein Formular in HTML erstellen und es dann mit JavaScript senden.(wie schon 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 albern, 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 einfach 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 verwenden Sie es gerne.

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

Aber ich würde die Funktion einfach weglassen und es 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 im Moment nicht wichtig.

Wenn Sie Prototype installiert haben, können Sie den Code straffen zu erzeugen und die versteckte Form wie folgt einreichen: 

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

Dies ist die Antwort von rakesh, aber mit Unterstützung für Arrays (die recht häufig in Formen sind):

Ebene 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 anderen Code, sondern läuft auf dasselbe hinaus nach unten) 

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

Eine Lösung ist, die Form zu generieren und einreichen. 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 eine URL Verkürzung Bookmarklet mit einem einfachen Implementierung 

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

Nun möchte ich alle anderen Beiträge gelesen hatte, so habe ich keine Zeit verlieren zu schaffen dies von Rakesh Pai Antwort. Hier ist eine rekursive Lösung, die mit Arrays und Objekten funktioniert. Keine Abhängigkeit von jQuery.

ein Segment hinzugefügt Fälle zu behandeln, in denen das gesamte Formular sollte wie ein Array eingereicht werden. (Dh., Wo es kein Wrapper-Objekt um eine Liste der Elemente) 

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

Drei Optionen hier.

  1. Standard JavaScript Antwort: Verwenden Sie einen Rahmen! Die meisten Ajax-Frameworks wird Ihnen eine einfache Möglichkeit haben abstrahiert einen XMLHTTPRequest POST zu machen.

  2. Machen Sie das XMLHTTPRequest selbst anfordern, Post in die offene Methode übergeben, anstatt zu bekommen. (Weitere Informationen in Mit POST-Methode in XMLHTTPRequest (Ajax) ).

  3. Via JavaScript, um dynamisch ein Formular erstellen, eine Aktion hinzuzufügen, fügen Sie Ihre Eingaben und trägt vor, dass.

Ich würde das Ajax Weg gehen, wie andere mit so etwas wie vorgeschlagen: 

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");

Hier ist, wie ich schrieb es jQuery verwenden. 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();
}

Der einfachste Weg ist mit Ajax Post-Anforderung: 

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

Dabei gilt:

  • data ist ein Objekt
  • datatype die Daten vom Server (xml erwartet ist, json, Schrift, Text, HTML)
  • URL ist die Adresse des REST-Server oder jede Funktion auf der Server-Seite, die den HTTP-POST an.

Dann in dem Erfolg Handler den Browser mit so etwas wie window.location umleiten.

Prototype Bibliothek umfasst ein Hashtable Objekt, mit einem ".toQueryString ()" Verfahren , mit dem Sie leicht ein JavaScript-Objekt / Struktur in eine Abfrage-String-Stil-String drehen. Da der Beitrag der „Körper“ der Anforderung erfordert eine Abfrage-String formatiert String zu sein, dies ermöglicht Ihre Ajax-Anfrage korrekt als Post zu arbeiten. Hier ist ein Beispiel unter Verwendung von 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();
};

Das funktioniert perfekt in meinem Fall: 

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

Sie können es in Funktion wie: 

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

das Verwenden Sie alle Werte der Eingänge veröffentlichen können.

formobject ist eine Option. Aber formobject nicht jetzt von den meisten Browsern unterstützt.

Noch eine weitere rekursive Lösung, da einige andere scheinen gebrochen zu werden (ich habe nicht alle testen). Dieser ist abhängig von lodash 3.x und ES6 ( 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();
}

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

Es nutzt die npm Bibliothek ‚qs‘ und seine stringify Funktion verschachtelte Objekte in Parameter zu umwandeln.

Dieser Code funktioniert gut mit einer Rails-Backend, obwohl Sie in der Lage sein sollte, ihn zu ändern, mit zu arbeiten, was auch immer Backend Sie benötigen, indem Sie die Optionen übergeben Modifizieren stringify. Rails erfordert, dass arrayFormat auf "Klammern" gesetzt werden. 

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"]}]}

Das ist wie Alans Option 2 (siehe oben). Wie die httpobj instanziiert wird als excercise links. 

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

Dies basiert auf beauSD den Code mit jQuery. Es verbessert wird, so dass es rekursiv auf 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();
}

Sie können dynamisch über das Formular DHTML hinzufügen und dann einreichen.

Sie können eine Bibliothek wie jQuery und seine $ .post Methode .

Ich verwende die document.forms java und schlingt es alle Elemente in Form zu bekommen, dann über xhttp senden. Also das ist meine Lösung für Javascript / Ajax einreichen (mit allen HTML als Beispiel enthalten): 

          <!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>

Die Methode, die ich schreiben verwenden und einen Benutzer automatisch direkt auf eine andere Seite ist nur eine versteckte Form zu schreiben und sie dann automatisch einreichen. Seien Sie versichert, dass die versteckte Form auf der Webseite absolut keinen Platz in Anspruch nimmt. Der Code würde wie folgt sein: 

    <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 von Auto einreichen

Eine Anwendung eines Auto einreichen würde Form Wert Regie führt, dass der Benutzer automatisch auf der anderen Seite auf dieser Seite setzt in zurück. Eine solche Anwendung so sein würde: 

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

Hier ist, wie ich es tun. 

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

jQuery-Plugin für Redirect mit POST oder GET:

https://github.com/mgalante/jquery .redirect / Blob / Master / jquery.redirect.js

Um zu testen, schließen die oben JS-Datei oder copy / paste die Klasse in Ihrem Code, verwenden Sie dann den Code hier „args“ mit Variablennamen ersetzt, und „Werte“ mit den Werten dieser jeweiligen Variablen: 

$.redirect('demo.php', {'arg1': 'value1', 'arg2': 'value2'});

Sie könnten Sie jQuery Trigger-Methode das Formular abzuschicken, genau wie Sie eine Taste drücken, wie so, 

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

es wird auf dem Browser vor.

Sie können einen AJAX-Aufruf machen (wahrscheinlich eine Bibliothek wie die Verwendung von Prototype.js oder JQuery verwenden). AJAX verarbeiten kann sowohl GET und POST-Optionen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top