Haga que un enlace use POST en lugar de GET

205

No estoy seguro de si esto es posible. Pero me preguntaba si alguien sabe cómo hacer que un hipervínculo pase algunas variables y use POST (como un formulario) en lugar de GET.

javascript html http Elliot
fuente
HTML no puede hacer eso. JavaScript puede capturar el evento de clic en el enlace y hacer lo que quiera si no puede cambiar HTML y CSS puede dar estilo al botón como enlaces si es solo una cuestión de apariencia.
sylvain

Respuestas:

99

Crea un formulario con entradas ocultas que contienen los valores que se publicarán, establece la acción del formulario en la URL de destino y el método de formulario para publicar . Luego, cuando haga clic en su enlace, active una función JS que envíe el formulario.

Ver aquí , para un ejemplo. Este ejemplo usa JavaScript puro, sin jQuery; puede elegir esto si no desea instalar nada más de lo que ya tiene.

<form name="myform" action="handle-data.php" method="post">
  <label for="query">Search:</label>
  <input type="text" name="query" id="query"/>
  <button>Search</button>
</form>

<script>
var button = document.querySelector('form[name="myform"] > button');
button.addEventListener(function() {
  document.querySelector("form[name="myform"]").submit();
});
</script>
Palantir
fuente
16
¿Por qué es esta la respuesta aceptada? La pregunta específicamente solicita el uso POST (como un formulario) en lugar de GET , sin embargo, esta respuesta dice " establecer la acción en la URL de destino y el método para obtener ".
Majid Fouladpour
3
Lo entiendo. Lo que no entiendo es esto: nos tomamos la molestia de crear un formulario oculto para que podamos PUBLICAR, pero luego, una vez creado el formulario, ¿por qué propone establecer el método GET? Tuvimos getsin la forma, ¿no?
Majid Fouladpour
3
Tienes razón. Eso fue un error, pero de alguna manera el OP todavía lo hizo bien (probablemente debido al enlace incluido que es mucho más claro). Gracias por señalarlo. Lo reformulé por completo.
Palantir
3
Actualicé su respuesta para usar un enfoque más moderno. Si no está de acuerdo, no dude en revertir esta edición.
Michał Perłakowski
3
No hay ninguna razón para involucrar a Javascript en este proceso. ¿Por qué es esta la respuesta aceptada?
Shacker
323

No necesitas JavaScript para esto. Solo quería aclararlo, ya que desde el momento en que se publicó esta respuesta, todas las respuestas a esta pregunta implican el uso de JavaScript de una forma u otra.

Puede hacer esto con bastante facilidad con HTML y CSS puros creando un formulario con campos ocultos que contengan los datos que desea enviar, luego aplicando el botón de envío del formulario para que parezca un enlace.

Por ejemplo:

.inline {
  display: inline;
}

.link-button {
  background: none;
  border: none;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  font-size: 1em;
  font-family: serif;
}
.link-button:focus {
  outline: none;
}
.link-button:active {
  color:red;
}
<a href="some_page">This is a regular link</a>

<form method="post" action="some_page" class="inline">
  <input type="hidden" name="extra_submit_param" value="extra_submit_value">
  <button type="submit" name="submit_param" value="submit_value" class="link-button">
    This is a link that sends a POST request
  </button>
</form>
Expandir fragmento

El CSS exacto que use puede variar según el estilo de los enlaces regulares en su sitio.

Ajedi32
fuente
44
convenido. Necesitaba una forma de hacer esto en un correo electrónico, por lo que JS no era una gran opción para mí. Esto debería funcionar perfectamente
SynackSA
8
Solo puedo votar esta vez. Eso es casi tan triste como el hecho de que el 99.728% de todas las preguntas HTML terminarán siendo confundidas con problemas de Javascript o jQuery.
Rab
3
Esta es sin duda una forma simple de usar un botón que parece un enlace, pero en realidad es una codificación rígida. Debe conocer exactamente las condiciones en las que va a vivir este botón y configurarlas explícitamente para cada caso. Creo que las respuestas que se basan en JS / JQuery son más genéricas ya que están utilizando el elemento de enlace en sí (o el elemento que sea).
MakisH
2
@ Ajedi32 Lo siento, mi comentario no fue tan claro: principalmente trato de decir que este botón está diseñado específicamente para parecerse a un elemento <a>. Pero si coloca el botón alrededor de otros elementos <a> que tienen un estilo diferente, por ejemplo, en diferentes partes de la página, debe duplicar todas las reglas CSS de <a> también para el botón, para crear reglas de desplazamiento, visitadas, etc. De lo contrario, por supuesto, hará el trabajo, pero se verá feo. Con las otras soluciones, simplemente no necesita cambiar ningún CSS, solo obtiene un elemento <a> como todos los demás que ya tiene. Por supuesto, HTML puro también tiene algunas ventajas.
MakisH
1
@Robert AFAIK, ninguna de las otras soluciones propuestas funciona con un clic central tampoco. Si realmente quiere ser pedante, puede decir que enviar una solicitud POST con un enlace es imposible. Solo puede enviar solicitudes POST con formularios y JavaScript.
Ajedi32
48

Puedes usar las funciones de JavaScript. JQuery tiene una buena función de publicación incorporada si decides usarla:

JQuery Post

<script language="javascript"> 

   function DoPost(){
      $.post("WhateverPage.php", { name: "John", time: "2pm" } );  //Your values here..
   }

</script>


<a href="javascript:DoPost()">Click Here</A>
AGoodDisplayName
fuente
55
Esto hace que la solicitud POST se solicite, pero no pude usarla porque todavía necesito ir a la ubicación "Whatever.php".
Chris
66
$.post('page.php', {param: 1}, function() { window.location.href = 'page'.php' });
JREAM
1
@mplungjan href dice a dónde se refiere el enlace, aunque estoy de acuerdo en que está mal confundir el comportamiento y el contenido, en este caso, javascript es la referencia. En otras palabras, "al hacer clic en el enlace, se realizará una devolución de datos mediante JavaScript". Esto tiene más significado que enlazar un evento de clic. Reglas estrictas como "nunca use javascript en href" son tan malas como cualquier otra mala práctica.
Menol
@Menol dije: no recomendado. - No "nunca lo uses". Si realmente quieres, puedes hacer <a href="whyjavascript.html" id="postIt">Click Here</a>y tener$("#postIt").on("click",function(e) { e.preventDefault(); $.post("WhateverPage.php", { name: "John", time: "2pm" } ); });
mplungjan
1
@mplungjan esa recomendación como cualquier otra se introduce para evitar contenido / comportamiento confuso. Cuando se presenta una recomendación en casos fuera del alcance previsto, comienza a aparecer como una regla estricta. El ejemplo que diste parece ir más allá para estar seguro de la "regla" para que nadie pueda culpar al programador en el futuro, pero esta seguridad se logra a costa de la legibilidad y el significado. Así es como le parece a otro desarrollador pragmático, pero estoy seguro de que no quiso decir eso.
Menol
24

Esta es una vieja pregunta, pero ninguna de las respuestas satisface la solicitud en su totalidad. Entonces estoy agregando otra respuesta.

El código solicitado, según tengo entendido, debería hacer solo un cambio en la forma en que funcionan los hipervínculos normales: el POSTmétodo debe usarse en lugar de GET. Las implicaciones inmediatas serían:

  1. Cuando se hace clic en el enlace, debemos volver a cargar la pestaña en la URL de href
  2. Como el método es POST, no deberíamos tener una cadena de consulta en la URL de la página de destino que cargamos
  3. Esa página debe recibir los datos en parámetros (nombres y valores) por POST

Estoy usando jquery aquí, pero esto podría hacerse con apis nativas (más duras y largas, por supuesto).

<html>
<head>
    <script src="path/to/jquery.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {

            $("a.post").click(function(e) {
                e.stopPropagation();
                e.preventDefault();
                var href = this.href;
                var parts = href.split('?');
                var url = parts[0];
                var params = parts[1].split('&');
                var pp, inputs = '';
                for(var i = 0, n = params.length; i < n; i++) {
                    pp = params[i].split('=');
                    inputs += '<input type="hidden" name="' + pp[0] + '" value="' + pp[1] + '" />';
                }
                $("body").append('<form action="'+url+'" method="post" id="poster">'+inputs+'</form>');
                $("#poster").submit();
            });
        });
    </script>
</head>
<body>
    <a class="post" href="reflector.php?color=blue&weight=340&model=x-12&price=14.800">Post it!</a><br/>
    <a href="reflector.php?color=blue&weight=340&model=x-12&price=14.800">Normal link</a>
</body>
</html>

Y para ver el resultado, guarde lo siguiente como reflector.php en el mismo directorio que tiene guardado lo anterior.

<h2>Get</h2>
<pre>
<?php print_r($_GET); ?>
</pre>

<h2>Post</h2>
<pre>
<?php print_r($_POST); ?>
</pre>
Majid Fouladpour
fuente
12

Otro ejemplo de trabajo, utilizando un enfoque similar publicado: cree un formulario html, use javascript para simular la publicación. Esto hace 2 cosas: publicar datos en una nueva página y abrirlos en una nueva ventana / pestaña.

HTML

<form name='myForm' target="_blank" action='newpage.html' method='post'>
<input type="hidden" name="thisIsTheParameterName" value="testDataToBePosted"/>
</form>

JavaScript

document.forms["myForm"].submit();
Quannt
fuente
3

HTML + JQuery : un enlace que envía un formulario oculto con POST.

Dado que pasé mucho tiempo para comprender todas estas respuestas, y dado que todas tienen algunos detalles interesantes, aquí está la versión combinada que finalmente funcionó para mí y que prefiero por su simplicidad.

Mi enfoque es nuevamente crear un formulario oculto y enviarlo haciendo clic en un enlace en otra parte de la página. No importa en qué parte del cuerpo de la página se colocará el formulario.

El código para el formulario:

<form id="myHiddenFormId" action="myAction.php" method="post" style="display: none">
  <input type="hidden" name="myParameterName" value="myParameterValue">
</form>

Descripción:

El display: noneoculta la forma. Alternativamente, puede ponerlo en un elemento div u otro y establecerlo display: noneen el elemento.

El type="hidden"creará un archivo que no se mostrará, pero sus datos se transmitirán a la acción de todos modos ( ver W3C ). Entiendo que este es el tipo de entrada más simple.

El código para el enlace:

<a href="" onclick="$('#myHiddenFormId').submit(); return false;" title="My link title">My link text</a>

Descripción:

El vacío hrefsolo apunta a la misma página . Pero realmente no importa en este caso, ya que return falseimpedirá que el navegador siga el enlace. Es posible que desee cambiar este comportamiento, por supuesto. En mi caso específico, la acción contenía una redirección al final.

Se onclickutilizó para evitar el uso href="javascript:..."como lo señaló mplungjan . Se $('#myHiddenFormId').submit();utilizó para enviar el formulario (en lugar de definir una función, ya que el código es muy pequeño).

Este enlace se verá exactamente como cualquier otro <a>elemento. En realidad, puede usar cualquier otro elemento en lugar de <a>(por ejemplo, una <span>o una imagen).

MakisH
fuente
2

Puedes usar esta función jQuery

function makePostRequest(url, data) {
    var jForm = $('<form></form>');
    jForm.attr('action', url);
    jForm.attr('method', 'post');
    for (name in data) {
        var jInput = $("<input>");
        jInput.attr('name', name);
        jInput.attr('value', data[name]);
        jForm.append(jInput);
    }
    jForm.submit();
}

Aquí hay un ejemplo en jsFiddle ( http://jsfiddle.net/S7zUm/ )

DarkThanos
fuente
@DaoLam el código realmente funciona. Me sustituyan leserged.free.fr/phpinfo.php para el valor en phpref y registró la forma a ese sitio que pasa en los valores.
JSWilson
2

Como se menciona en muchas publicaciones, esto no es directamente posible, pero una manera fácil y exitosa es la siguiente: Primero, colocamos un formulario en el cuerpo de nuestra página html, que no tiene ningún botón para enviar, y también sus entradas están escondidos. Luego usamos una función de JavaScript para obtener los datos y enviar el formulario. Una de las ventajas de este método es redirigir a otras páginas, lo que depende del código del lado del servidor. El código es el siguiente: y ahora en cualquier lugar necesita un método "POST":

<script type="text/javascript" language="javascript">
function post_link(data){

    $('#post_form').find('#form_input').val(data);
    $('#post_form').submit();
};
</script>

   <form id="post_form" action="anywhere/you/want/" method="POST">
 {% csrf_token %}
    <input id="form_input" type="hidden" value="" name="form_input">
</form>

<a href="javascript:{}" onclick="javascript:post_link('data');">post link is ready</a>
Mahdi Firouzjah
fuente
1

Sugiero un enfoque más dinámico, sin codificación html en la página, manténgalo estrictamente JS:

$("a.AS-POST").on('click', e => {
  e.preventDefault()
  let frm = document.createElement('FORM')
  frm.id='frm_'+Math.random()
  frm.method='POST'
  frm.action=e.target.href
  document.body.appendChild(frm)
  frm.submit()
})
Nimrod
fuente
0

En lugar de usar JavaScript, también puede usar una etiqueta que envíe un formulario oculto. Muy simple y pequeña solución. La etiqueta puede estar en cualquier parte de su html.

<form style="display: none" action="postUrl" method="post">
  <button type="submit" id="button_to_link"> </button>
</form>
<label style="text-decoration: underline" for="button_to_link">  link that posts </label>
Expandir fragmento

Gladhon
fuente
-1

Mira esto te ayudará 

$().redirect('test.php', {'a': 'value1', 'b': 'value2'});
Shoaib Quraishi
fuente
2
Debe mencionar que esta solución necesita la siguiente biblioteca: github.com/mgalante/jquery.redirect
Felix G.