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


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 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, al igual que enviar un formulario. Si esto es posible con XMLHttpRequest, no es obvio. Y esto no debería ser asincrónico ni usar XML, por lo que Ajax no es la respuesta.


1277
2017-09-25 15:15


origen


Respuestas:


function post(path, params, method) {
    method = method || "post"; // Set method to post by default if not specified.

    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
        }
    }

    document.body.appendChild(form);
    form.submit();
}

Ejemplo:

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

EDITAR: Como esto se ha elevado tanto, supongo que la gente va a copiar mucho esto. Entonces agregué el hasOwnProperty revisa para arreglar cualquier error inadvertido.


1841
2017-09-25 15:28



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

109
2018-04-04 00:21



Una simple implementación rápida y sucia 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 framework de JavaScript como Prototipo o jQuery...


62
2017-09-25 15:33



Utilizando el createElement función proporcionada en esta respuesta, que es necesario debido a IE's quebrantamiento 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);
}

51
2017-09-25 15:29



La respuesta de Rakesh Pai es increíble, 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 parchado la función ligeramente 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!

34
2017-07-15 20:50



No, no puedes 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 lo sugiriera.

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

Entonces, úsalo como.

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

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

   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 las formas deben abordarse por su nombre, pero eso no es importante en este momento.


27
2017-08-19 01:00



Si usted tiene 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();

24
2018-01-23 23:53