javascript - senden - jquery post request




JavaScript Post-Anfrage wie ein Formular absenden (18)

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';

Aber die Ressource, auf die ich zugreifen möchte, reagiert nicht richtig, wenn ich keine POST-Anfrage 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 das Formular einfach vom DOM einreichen.

Aber wirklich möchte ich JavaScript-Code, der mir erlaubt zu sagen

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

Was ist die beste Cross-Browser-Implementierung?

Bearbeiten

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


Das ist wie Alans Option 2 (oben). Wie man das 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);

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

woher:

  • Daten sind ein Objekt
  • dataType sind die Daten, die vom Server erwartet werden (xml, json, script, text, html)
  • URL ist die Adresse Ihres RESt-Servers oder eine Funktion auf der Serverseite, die den HTTP-POST akzeptiert.

Dann leiten Sie in der Erfolgsroutine den Browser mit etwas wie window.location um.


Die Methode, die ich benutze, um einen Benutzer automatisch auf eine andere Seite zu posten und zu leiten, besteht darin, einfach ein verstecktes Formular zu schreiben und es dann automatisch zu senden. Seien Sie versichert, dass die versteckte Form absolut keinen Platz auf der Webseite einnimmt. Der Code wäre etwa 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 anweisen, die der Benutzer automatisch auf der anderen Seite auf diese Seite zurücksetzt. 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();
}

Dies basiert auf dem Code von beauSD mit jQuery. Es wurde verbessert, sodass es rekursiv auf Objekten 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();
}

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

Drei Optionen hier.

  1. Standard-JavaScript-Antwort: Verwenden Sie ein Framework! Die meisten Ajax-Frameworks haben Ihnen eine einfache Möglichkeit gegeben, einen XMLHttpRequest POST zu XMLHttpRequest .

  2. Stellen Sie die XMLHTTPRequest-Anforderung selbst und übergeben Sie die Post an die offene Methode anstelle von 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 sie ab.


Eine einfache und schnelle 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 ein JavaScript-Framework wie Prototype oder jQuery ...


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

Ich benutze das document.forms Java und loop es, um alle Elemente im Formular zu erhalten, dann sende über xhttp. Also das ist meine Lösung für Javascript / Ajax Submit (mit allen 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>

Ich ging die Ajax-Route hinunter, als andere mit etwas wie:

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

Noch eine rekursive Lösung, da einige andere anscheinend kaputt sind (ich habe sie nicht alle getestet). 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();
}

Nun, ich wünschte, ich hätte alle anderen Beiträge gelesen, also habe ich keine Zeit verloren, diese aus Rakesh Pais Antwort zu schaffen. 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 bearbeiten, 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();
};


Sie könnten einen AJAX-Aufruf durchführen (wahrscheinlich mit einer Bibliothek wie beispielsweise mit Prototype.js oder JQuery). AJAX kann sowohl GET- als auch POST-Optionen verarbeiten.


Wenn Sie Prototype installiert haben, können Sie den Code zum Generieren und Senden des ausgeblendeten Formulars wie folgt straffen:

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

Rakesh Pais Antwort ist erstaunlich, aber es gibt ein Problem, das für mich (in Safari ) auftritt, wenn ich versuche, ein Formular mit einem Feld namens submit zu posten. Beispiel: post_to_url("http://google.com/",{ submit: "submit" } ); . Ich habe die Funktion leicht gepatcht, um diese Kollision mit dem variablen Raum 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!

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

Es funktioniert perfekt in meinem Fall.

Sie können es in der Funktion auch gerne verwenden,

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

Mit diesem können Sie alle Werte von Eingaben posten.


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

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            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();
}

Beispiel:

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

EDIT : Da dies so stark aufgewertet wurde, denke ich, dass die Leute das viel kopieren werden. Also habe ich die hasOwnProperty Prüfung hinzugefügt, um unbeabsichtigte Fehler zu beheben.





html-form