Solicitud de publicación de JavaScript como un formulario enviar


1531

Estoy tratando de 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 use una solicitud POST. Si esto no fuera generado dinámicamente, podría usar el HTML

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

Entonces simplemente enviaría el formulario del 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, al igual que enviar un formulario. Si esto es posible con XMLHttpRequest , no es obvio. Y esto no debe ser asíncrono, ni usar XML, por lo que Ajax no es la respuesta.


1
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': 'value1', 'arg2': 'value2'}); github.com/mgalante/jquery.redirect/blob/master/…
OG Sean

Respuestas:


2145

Crear dinámicamente <input>s en un formulario y enviarlo

/**
 * 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 se ha votado tanto, supongo que la gente va a copiar esto mucho. Así que agregué el hasOwnPropertycheque para corregir cualquier error inadvertido.


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

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

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

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

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

129

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

2
Solucionado: ahora se agrega a document.body
Ryan Delucchi

77
Ligeramente modificado esto para admitir matrices y objetos gist.github.com/hom3chuk/692bf12fe7dac2486212
Noviembre

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

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

71

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

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 usar un marco JavaScript como Prototype o jQuery ...


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

54

Usando la createElementfunción proporcionada en esta respuesta , que es necesaria debido a la ruptura 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);
}

66
¿Necesita eliminar al niño después del envío? ¿La página no desaparece de todos modos?
Nils

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

66
@CantucciHQ La página podría permanecer igual incluso si el objetivo del formulario no está configurado. Hay 204 Sin contenido , por ejemplo.
Eugene Ryabtsev

38

La respuesta de Rakesh Pai es sorprendente, 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 ligeramente la función para caminar alrededor de esta colisión espacial 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!

77
¿2018 y todavía no es una mejor respuesta?
iiirxs

30

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

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

Puede crear el HTML usted mismo, no necesita JavaScript para escribir el HTML. Eso sería una tontería si 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, úsalo 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 deben abordarse por nombre, pero eso no es importante en este momento.


26

Si tiene instalado Prototype , 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();

25

Esta es la respuesta de Rakesh, pero con soporte para matrices (que es bastante común en los formularios):

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

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

3
¡Excelente! muy útil. Un pequeño cambio para las personas que confían en 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

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

17

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 marcador de acortamiento de URL con un simple

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

16

Bueno, desearía haber leído todas las otras 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. No depende de jQuery.

Se agregó un segmento para manejar casos en los que todo el formulario debe enviarse como una matriz. (es decir, donde no hay un 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();
};

1
Esto tampoco parece codificar objetos anidados correctamente.
mpen

1
@mpen ¿tienes un violín?
emragins

1
No lo siento. Fue bastante fácil escribirme a mí mismo; No vale la pena el tiempo para depurar.
mpen

12

Tres opciones aquí.

  1. Respuesta estándar de JavaScript: ¡Use un marco! La mayoría de los frameworks de Ajax le habrán abstraído una manera fácil de hacer una POST XMLHTTPRequest .

  2. Realice la solicitud XMLHTTPRequest usted mismo, pasando la publicación al método abierto en lugar de get. (Más información en Uso del 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íela.


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

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

12

Iría por la ruta del Ajax como otros sugirieron 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");

1
Error de referencia no capturado: QueryString no está definido.
Chase Roberts

11

La forma más fácil es usar 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 esperados por 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.


55
No mencionó que el enfoque que ofrece se basa en la biblioteca jQuery JavaScript.
DavidRR

8
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 donde puedo imaginar que esto no funcionaría es si estás redirigiendo a una descarga de archivo.
Epirocks

11

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

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

2
Creo que el problema aquí podría ser que el formulario se elimina antes de que se devuelva el envío. He oído que en algunos navegadores si mueve o elimina el formulario antes de que se complete el envío, los controladores no se activarán. 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

6

La biblioteca Prototype incluye un objeto Hashtable, con un método ".toQueryString ()", que le permite convertir fácilmente un objeto / estructura JavaScript en una cadena de estilo de cadena de consulta. Como la publicación requiere que el "cuerpo" de la solicitud sea una cadena con formato de cadena de consulta, esto permite que su solicitud de 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();
};

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

4

Esto funciona perfectamente en mi caso:

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

Puede usarlo en funciones como:

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

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


3

Otra solución recursiva , ya que algunas de otras parecen estar rotas (no las probé todas). Este depende de lodash 3.xy 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();
}

3

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


1

Esto es como la opción 2 de Alan (arriba). Cómo instanciar el httpobj se deja como ejercicio.

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

1

Esto se basa en el código de beauSD usando jQuery. Se mejora 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();
}



1

Uso el document.forms java y lo repito para obtener todos los elementos en el formulario, luego lo envío a través de xhttp. Entonces esta es mi solución para el envío de javascript / ajax (con todos los html incluidos 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>

1

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.


0

El método que uso 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 la forma oculta 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();

Solicitud de envío automático

Una aplicación de envío automático estaría dirigiendo valores de 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();
}

0

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

0

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

Aquí hay un ejemplo de cómo usarlo. 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 el 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.


-1

Complemento jQuery para redirigir 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 variables y "valores" con los valores de esas variables respectivas:

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

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

Esta solución aún funciona bien para nosotros, si la votó en contra, deje un comentario sobre por qué.
OG Sean

-2

Puede realizar una llamada AJAX (probablemente utilizando una biblioteca como Prototype.js o JQuery). AJAX puede manejar las opciones GET y POST.


55
El uso de XMLHttpRequest no dirigiría el navegador a otra página.
Jonny Buchanan
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.