JavaScript-postverzoek zoals een formulierverzending

Ik probeer een browser naar een andere pagina te leiden. Als ik een GET-verzoek wilde, zou ik misschien zeggen

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

Maar de bron die ik probeer te openen, zal niet correct reageren, tenzij ik een POST-verzoek gebruik. Als dit niet dynamisch werd gegenereerd, zou ik de HTML kunnen gebruiken

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

Dan zou ik gewoon het formulier van de DOM indienen.

Maar ik zou graag JavaScript-code willen waarmee ik kan zeggen

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

Wat is de beste cross-browser implementatie?

Bewerken

Het spijt me dat ik niet duidelijk was. Ik heb een oplossing nodig die de locatie van de browser verandert, net zoals het verzenden van een formulier. Als dit mogelijk is met XMLHttpRequest, ligt dat niet voor de hand. En dit mag niet asynchroon zijn en ook geen XML gebruiken, dus Ajax is niet het antwoord.


Antwoord 1, autoriteit 100%

Dynamisch <input>s maken in een formulier en dit indienen

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

Voorbeeld:

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

EDIT: aangezien dit zo veel positieve stemmen heeft gekregen, vermoed ik dat mensen dit veel zullen kopiëren en plakken. Dus heb ik de hasOwnProperty-controle toegevoegd om eventuele onopzettelijke bugs op te lossen.


Antwoord 2, autoriteit 6%

Dit is een versie van het geselecteerde antwoord met 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();
}

Antwoord 3, autoriteit 3%

Een eenvoudige snelle en vuile implementatie van @Aaron-antwoord:

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

Je kunt natuurlijk beter een JavaScript-framework gebruiken, zoals Prototype of jQuery


Antwoord 4, autoriteit 2%

De functie createElement gebruiken die wordt geboden in dit antwoord, dat nodig is vanwege IE-fout met het name-attribuut op elementen die normaal zijn gemaakt met document.createElement:

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

Antwoord 5, autoriteit 2%

Het antwoord van Rakesh Pai is geweldig, maar er is een probleem dat bij mij optreedt (in Safari) wanneer ik probeer te posten een formulier met een veld genaamd submit. Bijvoorbeeld post_to_url("https://google.com/",{ submit: "submit" } );. Ik heb de functie enigszins gepatcht om deze variabele ruimtebotsing te omzeilen.

    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("https://google.com/", { submit: "submit" } ); //Works!

Antwoord 6

Nee. U kunt het JavaScript-postverzoek niet als een formulier laten indienen.

Wat u kunt hebben, is een formulier in HTML, dat u vervolgens samen met JavaScript verzendt. (zoals vaak uitgelegd op deze pagina).

Je kunt de HTML zelf maken, je hebt geen JavaScript nodig om de HTML te schrijven. Dat zou dom zijn als mensen dat zouden voorstellen.

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

Uw functie zou het formulier gewoon configureren zoals u het wilt.

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

Gebruik het dan als.

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

Maar ik zou de functie gewoon weglaten en gewoon doen.

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

Eindelijk komt de stijlbeslissing in het ccs-bestand.

#ninja{ 
  display:none;
}

Persoonlijk vind ik dat formulieren bij naam moeten worden geadresseerd, maar dat is op dit moment niet belangrijk.


Antwoord 7

dit is het antwoord van rakesh, maar met ondersteuning voor arrays (wat vrij gebruikelijk is in formulieren):

gewoon 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, en hier is de jQuery-versie: (iets andere code, maar komt op hetzelfde neer)

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

Antwoord 8

Als je Prototype hebt geïnstalleerd, kun je de code aanscherpen om het verborgen formulier als volgt te genereren en in te dienen:

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

Antwoord 9

Een oplossing is om het formulier te genereren en in te dienen. Een implementatie is

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

Dus ik kan een URL-verkorte bookmarklet implementeren met een simpele

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

Antwoord 10

Nou, ik wou dat ik alle andere berichten had gelezen, zodat ik geen tijd verloor om dit te maken met het antwoord van Rakesh Pai. Hier is een recursieve oplossing die werkt met arrays en objecten. Geen afhankelijkheid van jQuery.

Een segment toegevoegd voor het afhandelen van gevallen waarin het hele formulier als een array moet worden ingediend. (d.w.z. waar er geen wrapper-object rond een lijst met items is)

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

Antwoord 11

Ik zou de Ajax-route volgen zoals anderen suggereerden met iets als:

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

Antwoord 12

Hier drie opties.

  1. Standaard JavaScript-antwoord: gebruik een framework! De meeste Ajax-frameworks hebben u een eenvoudige manier gegeven om een ​​XMLHTTPRequest POST te maken.

  2. Maak zelf het XMLHTTPRequest-verzoek, waarbij u de post doorgeeft aan de open-methode in plaats van get. (Meer informatie in POST-methode gebruiken in XMLHTTPRequest (Ajax) .)

  3. Via JavaScript maakt u dynamisch een formulier, voegt u een actie toe, voegt u uw gegevens toe en verzendt u dat.


Antwoord 13

De gemakkelijkste manier is om Ajax Post Request te gebruiken:

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

waar:

  • gegevens zijn een object
  • dataType zijn de gegevens die door de server worden verwacht (xml,
    json, script, tekst, html)
  • url is het adres van uw REST-server of een functie aan de serverzijde die de HTTP-POST accepteert.

Vervolg in de succeshandler de browser omgeleid met iets als window.location.


Antwoord 14

Hier is hoe ik het heb geschreven met jQuery. Getest in Firefox en 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();
}

Antwoord 15

De bibliotheek Prototype bevat een Hashtable-object, met een “.toQueryString()”-methode, waarmee u eenvoudig een JavaScript-object/-structuur kunt omzetten in een tekenreeks in queryreeksstijl. Aangezien het bericht vereist dat de “body” van het verzoek een tekenreeks is met een querystring, kan uw Ajax-verzoek correct werken als een bericht. Hier is een voorbeeld met 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();
};

Antwoord 16

Dit werkt perfect in mijn geval:

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

Je kunt het gebruiken in functies als:

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

Hiermee kun je alle invoerwaarden posten.


Antwoord 17

Mijn oplossing codeert diep geneste objecten, in tegenstelling tot de momenteel geaccepteerde oplossing van @RakeshPai.

Het gebruikt de ‘qs’ npm-bibliotheek en de stringify-functie om geneste objecten om te zetten in parameters.

Deze code werkt goed met een Rails-back-end, hoewel je hem zou moeten kunnen aanpassen om te werken met elke back-end die je nodig hebt door de opties aan te passen die zijn doorgegeven aan stringify. Rails vereist dat arrayFormat wordt ingesteld op “haakjes”.

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

Voorbeeld:

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

Produceert deze Rails-parameters:

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

Antwoord 18

Nog een recursieve oplossing, aangezien sommige van andere defect lijken te zijn (ik heb ze niet allemaal getest). Deze is afhankelijk van lodash 3.x en ES6 ( jQuery niet vereist):

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

Antwoord 19

FormObject is een optie. Maar FormObject wordt nu niet door de meeste browsers ondersteund.


Antwoord 20

Dit is vergelijkbaar met Alan’s optie 2 (hierboven). Hoe de httpobj te instantiëren wordt overgelaten als een oefening.

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

Antwoord 21

Dit is gebaseerd op de code van beauSD met jQuery. Het is verbeterd, zodat het recursief werkt op objecten.

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

Antwoord 22

U kunt het formulier dynamisch toevoegen met DHTML en vervolgens verzenden.


Antwoord 23

Je zou een bibliotheek zoals jQuery en zijn $.post-methode kunnen gebruiken.


Antwoord 24

Ik gebruik de document.forms java en loop het om alle elementen in het formulier te krijgen, en verzend het dan via xhttp. Dus dit is mijn oplossing voor javascript / ajax submit (met alle html als voorbeeld):

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

Antwoord 25

De methode die ik gebruik om een ​​gebruiker automatisch naar een andere pagina te sturen, is door een verborgen formulier te schrijven en dit vervolgens automatisch in te dienen. Wees ervan verzekerd dat het verborgen formulier absoluut geen ruimte inneemt op de webpagina. De code zou ongeveer als volgt zijn:

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

Toepassing van automatisch indienen

Een toepassing van een automatische indiening zou formulierwaarden die de gebruiker automatisch op de andere pagina heeft ingevoerd, terugsturen naar die pagina. Een dergelijke toepassing zou er als volgt uitzien:

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

Antwoord 26

Hier is hoe ik het doe.

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

Antwoord 27

jQuery-plug-in voor omleiding met POST of GET:

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

Om te testen, neemt u het bovenstaande .js-bestand op of kopieert/plakt u de klasse in uw code en gebruikt u de code hier, waarbij u “args” vervangt door uw variabelenamen en “waarden” door de waarden van die respectieve variabelen:

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

Antwoord 28

Geen van de bovenstaande oplossingen verwerkte diep geneste parameters met alleen jQuery,
dus hier is mijn twee cent-oplossing.

Als u jQuery gebruikt en diep geneste parameters moet verwerken, kunt u deze functie hieronder gebruiken:

    /**
     * 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 is een voorbeeld van hoe het te gebruiken.
De 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>

En als u op de testknop klikt, wordt het formulier gepost en krijgt u de volgende waarden in POST:

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

Opmerking: als u het formulier op een andere url dan de huidige pagina wilt plaatsen, kunt u de url specificeren als het tweede argument van de postForm-functie.

Dus bijvoorbeeld (om uw voorbeeld opnieuw te gebruiken):

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

Hopelijk helpt dit.

Opmerking 2: de code is overgenomen van de omleidingsplug-in. Ik heb het eigenlijk gewoon vereenvoudigd
voor mijn behoeften.


Antwoord 29

Je zou de triggermethode van jQuery kunnen gebruiken om het formulier in te dienen, net zoals je op een knop drukt, zoals zo,

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

het wordt in de browser ingediend.


Antwoord 30

Probeer

function post_to_url(url, obj) {
  let id=`form_${+new Date()}`;
  document.body.innerHTML+=`
    <form id="${id}" action="${url}" method="POST">
      ${Object.keys(obj).map(k=>`
        <input type="hidden" name="${k}" value="${obj[k]}">
      `)}
    </form>`
  this[id].submit();  
}
// TEST - in second param object can have more keys
function jump() { post_to_url('https://example.com/', {'q':'a'}); }
Open chrome>networks and push button:
<button onclick="jump()">Send POST</button>

LEAVE A REPLY

Please enter your comment!
Please enter your name here

16 + 10 =

Other episodes