Solicitud de publicación de JavaScript como envío de formulario

Estoy intentando dirigir un navegador a una página diferente. Si quisiera una solicitud GET, podría decir

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

Pero el recurso al que intento acceder no responderá correctamente a menos que utilice una solicitud POST. Si esto no se generó dinámicamente, podría usar el HTML

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

Entonces solo enviaría el formulario desde el DOM.

Pero realmente me gustaría un código JavaScript que me permita decir

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

¿Cuál es la mejor implementación de navegador cruzado?

Editar

Lo siento, no estaba claro. Necesito una solución que cambie la ubicación del navegador, como enviar un formulario. Si esto es posible con XMLHttpRequest, no es obvio. Y esto no debería ser asíncrono, ni usar XML, por lo que Ajax no es la respuesta.

preguntado el 25 de septiembre de 08 a las 16:09

Como se mencionó en otro hilo, hay un complemento jquery ".redirect" que funciona con el método POST o GET. Crea un formulario con entradas ocultas y lo envía por usted. Ej: $ .redirect ('demo.php', {'arg1': 'valor1', 'arg2': 'valor2'}); github.com/mgalante/jquery.redirect/blob/master/… -

El document el objeto no tiene un location.href necesitas un uso window. -

30 Respuestas

Crea dinámicamente <input>s en un formulario y envíelo

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

Ejemplo:

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

EDITAR: Dado que esto ha recibido tantas votaciones, supongo que la gente copiará y pegará mucho. Así que agregué el hasOwnProperty verifique para corregir cualquier error inadvertido.

contestado el 03 de mayo de 19 a las 23:05

¿Qué pasa con las matrices en los parámetros de datos? Jquery post () interpreta, por ejemplo: "datos: {matriz: [1, 2, 3]}" como? Matriz = 1 & matriz = 2 & matriz = 3. Este código da otro resultado. - Scit

Advertencia: a pesar de los muchos votos a favor, esta solución es limitada y no maneja matrices ni objetos anidados dentro de un formulario. De lo contrario, es una gran respuesta. - emragins

increíble esto no es compatible de forma nativa ni con html ni con javascript ni con jquery ... tienes que codificar esto. - eugene

@mricci El objetivo de este fragmento es redirigir el navegador a una nueva URL especificada por la acción; si permanece en la misma página, puede usar AJAX tradicional para PUBLICAR sus datos. Dado que el navegador debería estar navegando a una nueva página, el contenido del DOM de la página actual no importará - Ken Bellows

Los usuarios de Python, Django y probablemente Flask verán este error: "Prohibido (403). Fallo en la verificación de CSRF. Solicitud cancelada", si se crea un formulario desde cero. En este caso, debe pasar el token csrf de esta manera: post ('/ contact /', {nombre: 'Johnny Bravo', csrfmiddlewaretoken: $ ("# csrf_token"). Val ()}); - Davidson Lima

Esta sería una versión de la respuesta seleccionada usando 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();
}

Respondido 24 Oct 12, 16:10

Se modificó ligeramente esto para admitir matrices y objetos. gist.github.com/hom3chuk/692bf12fe7dac2486212 - OVNI

Si el valor contiene un carácter xml peligroso, esto no funcionará en ASP.NET. Se requiere encodeUriComponent (valor). Entonces, UrlDecode también se requiere en el lado del servidor. - Stefan Steiger

Si sus necesidades son simples, esta función es innecesaria. Esta frase es suficiente: $("<form method='POST' action='https://example.com'><input type='hidden' name='q' value='a'/></form>").appendTo("body").submit(); - rinogo

Una implementación simple y rápida de @Aaron responde:

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

Por supuesto, debería utilizar un marco de JavaScript como Prototipo or jQuery...

respondido 10 mar '12, 21:03

¿Hay alguna manera de hacer esto sin que haya una página web cargada en la ventana / pestaña actual del navegador? - Pbreitenbach

¿Cómo inserto el csrf aquí? - Shulz

@Shulz Puede agregar otra entrada oculta con [name] ajustado a la clave, y [value] establecido en el valor del token. - Amir Savand

Usando el patrón de velas del createElement función proporcionada en esta respuesta, que es necesario debido a Quebrantamiento de IE con el atributo de nombre en elementos creados normalmente con 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);
}

contestado el 23 de mayo de 17 a las 13:05

¿Necesita retirar al niño después de la presentación? ¿No desaparece la página de todos modos? - Nils

No sirve de nada eliminar al niño después del envío, excepto si se usa una sesión y esos datos se guardan. - Miloš

@CantucciHQ La página también podría permanecer sin cambios incluso si el destino del formulario no está establecido. Hay 204 Sin Contenido, por ejemplo. - Eugene Ryabtsev

La respuesta de Rakesh Pai es asombroso, pero hay un problema que se me ocurre (en Safari) cuando intento publicar un formulario con un campo llamado submit. Por ejemplo, post_to_url("http://google.com/",{ submit: "submit" } );. He parcheado la función ligeramente para caminar alrededor de esta colisión de espacio variable.

    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!

Respondido el 17 de enero de 18 a las 00:01

2018 y todavía no hay una mejor respuesta? - iiirxs

¿Safari todavía tiene este problema que necesita esta solución? - Flimm

No. No puede hacer que la solicitud de publicación de JavaScript sea como un envío de formulario.

Lo que puede tener es un formulario en HTML y luego enviarlo con JavaScript. (como se explica muchas veces en esta página).

Puede crear el HTML usted mismo, no necesita JavaScript para escribir el HTML. Sería una tontería que la gente sugiriera eso.

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

Su función simplemente configuraría el formulario de la manera que lo desee.

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

Luego, utilícelo como.

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

Pero simplemente dejaría de lado la función y simplemente lo haría.

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

Finalmente, la decisión de estilo va en el archivo ccs.

#ninja{ 
  display:none;
}

Personalmente, creo que los formularios se deben abordar por su nombre, pero eso no es importante en este momento.

respondido 07 mar '19, 20:03

Si no Prototipo instalado, puede ajustar el código para generar y enviar el formulario oculto de esta manera:

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

Respondido 08 Oct 12, 10:10

esta es la respuesta de rakesh, pero con soporte para matrices (que es bastante común en las formas):

javascript simple:

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, y aquí está la versión de jquery: (código ligeramente diferente, pero se reduce a lo mismo)

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

respondido 22 mar '12, 05:03

ps, ahora disfruto usando esa función, pero en lugar de enviar el formulario al final, simplemente se lo devuelvo a la persona que llama. de esta manera puedo establecer fácilmente atributos adicionales o hacer otras cosas con él si es necesario. - kritzikratzi

¡Estupendo! muy útil. Un pequeño cambio para las personas que dependen de PHP en el lado del servidor de este formulario, cambié addField (key, params [key] [i]) a addField (key + '[]', params [key] [i]). Esto hace que $ _POST [clave] esté disponible como matriz. - Thava

@Thava también puede establecer name = "bla []" en su campo de entrada. de todos modos, hay otros lenguajes además de php que no soportan la sintaxis [] así que lo dejo sin cambios. - kritzikratzi

Una solución es generar el formulario y enviarlo. Una implementación es

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

Entonces puedo implementar un bookmarklet de acortamiento de URL con un simple

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

Respondido el 25 de Septiembre de 08 a las 20:09

Bueno, ojalá hubiera leído todas las demás publicaciones para no perder tiempo creando esto a partir de la respuesta de Rakesh Pai. Aquí hay una solución recursiva que funciona con matrices y objetos. Sin dependencia de jQuery.

Se agregó un segmento para manejar casos en los que el formulario completo debe enviarse como una matriz. (es decir, donde no hay ningún objeto contenedor alrededor de una lista de elementos)

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

Respondido 20 Oct 15, 14:10

Esto tampoco parece codificar correctamente los objetos anidados. - mpen

@mpen ¿tienes un violín? - emragins

No lo siento. Fue bastante fácil escribir yo mismo; no vale la pena el tiempo para depurar. - mpen

Tres opciones aquí.

  1. Respuesta estándar de JavaScript: ¡Utilice un marco! La mayoría de los frameworks Ajax le habrán resumido una forma fácil de hacer un XMLHTTPRequest CORREO.

  2. Realice la solicitud XMLHTTPRequest usted mismo, pasando post al método abierto en lugar de get. (Más información en Usando el método POST en XMLHTTPRequest (Ajax).)

  3. A través de JavaScript, cree dinámicamente un formulario, agregue una acción, agregue sus entradas y envíelo.

respondido 10 mar '12, 21:03

XMLHTTPRequest no actualiza la ventana. ¿Está tratando de decir que debería terminar con AJAX con un document.write (http.responseText)? - Joseph Holsten

¿Por qué debería uno agregar 30k + a su proyecto si no hace nada más con el marco? - Rafael Herscovici

La forma más sencilla es utilizar Ajax Post Request:

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

dónde:

  • los datos son un objeto
  • dataType son los datos que espera el servidor (xml, json, script, text, html)
  • url es la dirección de su servidor RESt o cualquier función en el lado del servidor que acepte HTTP-POST.

Luego, en el controlador de éxito, redirija el navegador con algo como window.location.

Respondido el 19 de junio de 14 a las 22:06

No mencionó que el enfoque que ofrece se basa en el jQuery Biblioteca JavaScript. - DavidRR

También te has perdido el punto de la pregunta: quiere 'dirigir un navegador a una página diferente', no hacer una solicitud ajax. - Negro

Puede esperar la respuesta y luego document.location = {url}; El único lugar en el que puedo imaginar que esto no funcionaría es si está redirigiendo a la descarga de un archivo. - Epirocks

Seguiría la ruta del Ajax como sugirieron otros con algo como:

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

Respondido 21 ago 14, 13:08

Error de referencia no detectado: QueryString no está definido. - Chase Roberts

Así es como lo escribí usando jQuery. Probado en Firefox e 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();
}

contestado el 06 de mayo de 18 a las 12:05

Trabajó para mi. Gracias. (Probado en Chrome) - dannie.f

Creo que el problema aquí podría ser que el formulario se elimina antes de que regrese el envío. Escuché que en algunos navegadores, si mueve o elimina el formulario antes de que se complete el envío, los controladores no se activan. En su lugar, elimine el formulario del documento en el controlador. - Jeff DQ

Funciona de maravilla. Probado en Firefox + Chrome + IE11 - ¡Muchas gracias por esto! - Deunz

El Prototipo La biblioteca incluye un objeto Hashtable, con un método ".toQueryString ()", que le permite convertir fácilmente un objeto / estructura de JavaScript en una cadena de estilo de cadena de consulta. Dado que la publicación requiere que el "cuerpo" de la solicitud sea una cadena con formato de cadena de consulta, esto permite que su solicitud Ajax funcione correctamente como una publicación. Aquí hay un ejemplo usando 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();
};

respondido 10 mar '12, 21:03

Esta solución es una de las pocas que no reemplaza el documento que se muestra actualmente por la devolución de la respuesta del servidor. - dothebart

Esto funciona perfectamente en mi caso:

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

Puedes usarlo en funciones como:

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

Con esto, puede publicar todos los valores de las entradas.

contestado el 06 de mayo de 18 a las 12:05

Mi solución codificará objetos profundamente anidados, a diferencia de la solución actualmente aceptada por @RakeshPai.

Utiliza la biblioteca npm 'qs' y su función stringify para convertir objetos anidados en parámetros.

Este código funciona bien con un back-end de Rails, aunque debería poder modificarlo para que funcione con cualquier backend que necesite modificando las opciones pasadas a stringify. Rails requiere que arrayFormat se establezca en "corchetes".

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

Ejemplo:

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

Produce estos parámetros de Rails:

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

Respondido el 01 de Septiembre de 18 a las 01:09

Esto funcionó muy bien para mí con objetos anidados / valores de matriz, gracias - sMyles

@sMyles Eso es muy apreciado y posiblemente la primera vez que alguien ha dado las gracias aquí :-) - cmrichards

Otro mas recursiva solución, ya que algunos de los otros parecen estar rotos (no los probé todos). Este depende de lodash 3.x y ES6 (no se requiere jQuery):

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

contestado el 12 de mayo de 16 a las 00:05

FormObject es una opción. Pero FormObject no es compatible con la mayoría de los navegadores ahora.

respondido 21 nov., 15:12

Esta es como la opción 2 de Alan (arriba). Cómo crear una instancia de httpobj se deja como un ejercicio.

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

Respondido el 25 de Septiembre de 08 a las 19:09

Esto se basa en el código de beauSD usando jQuery. Se ha mejorado para que funcione de forma recursiva en los objetos.

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

contestado el 27 de mayo de 11 a las 17:05

Utilizo document.forms java y lo repito para obtener todos los elementos en el formulario, luego lo envío a través de xhttp. Así que esta es mi solución para el envío de javascript / ajax (con todo el html incluido como ejemplo):

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

Respondido el 20 de enero de 18 a las 04:01

Puede agregar dinámicamente el formulario usando DHTML y luego enviarlo.

respondido 10 mar '12, 21:03

Podrías usar una biblioteca como jQuery y su método $ .post.

respondido 10 mar '12, 21:03

Tenga en cuenta que $ .post es solo AJAX. - Bryan Larsen

El método que utilizo para publicar y dirigir a un usuario automáticamente a otra página es simplemente escribir un formulario oculto y luego enviarlo automáticamente. Tenga la seguridad de que el formulario oculto no ocupa absolutamente ningún espacio en la página web. El código sería algo como esto:

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

Aplicación de envío automático

Una aplicación de envío automático estaría dirigiendo los valores del formulario que el usuario coloca automáticamente en la otra página de regreso a esa página. Tal aplicación sería así:

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

Respondido el 25 de Septiembre de 17 a las 11:09

Así es como lo hago.

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

respondido 07 mar '18, 02:03

Complemento jQuery para redireccionar con POST o GET:

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

Para probar, incluya el archivo .js anterior o copie / pegue la clase en su código, luego use el código aquí, reemplazando "args" con sus nombres de variable y "valores" con los valores de esas respectivas variables:

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

Respondido 09 Jul 18, 03:07

Esto también se mencionó aquí: stackoverflow.com/questions/8389646/… - OG Sean

Ninguna de las soluciones anteriores manejó parámetros anidados profundos con solo jQuery, así que aquí está mi solución de dos centavos.

Si está usando jQuery y necesita manejar parámetros anidados profundos, puede usar esta función a continuación:

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

A continuación, se muestra un ejemplo de cómo utilizarlo. El código html:

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

Y si hace clic en el botón de prueba, publicará el formulario y obtendrá los siguientes valores en 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"
      }
    }
  }
}

Nota: si desea publicar el formulario en otra URL que no sea la página actual, puede especificar la URL como segundo argumento de la función postForm.

Entonces, por ejemplo (para reutilizar su ejemplo):

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

Espero que esto ayude.

Nota 2: el código se tomó del complemento de redireccionamiento. Básicamente, lo simplifiqué para mis necesidades.

Respondido el 10 de diciembre de 19 a las 12:12

Puede usar el método de activación de jQuery para enviar el formulario, al igual que presiona un botón, así,

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

se enviará en el navegador.

Respondido el 08 de enero de 20 a las 17:01

Ni siquiera necesitas jQuery para eso. document.querySelector("form").submit() sería lo mismo con cualquier marco adicional - Ulrich Stark

Trata

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>

Respondido el 15 de junio de 20 a las 22:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.