Hacer un enlace usar POST en lugar de GET


No estoy seguro 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.

Author: Justin Ethier, 2010-10-12

9 answers

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 del formulario en post. Luego, cuando se haga clic en su enlace, active una función JS que envíe el formulario.

Ver aquí, para un ejemplo. Este ejemplo utiliza 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>
 79
Author: Palantir,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-19 23:14:11

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

Puede hacer esto fácilmente con HTML puro y CSS creando un formulario con campos ocultos que contengan los datos que desea enviar, luego diseñando el botón enviar del formulario para que parezca un enlace.

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

El CSS exacto que use puede variar dependiendo de cómo se diseñen los enlaces regulares en su sitio.

 212
Author: Ajedi32,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-30 13:27:24

Puede usar funciones javascript. jQuery tiene una buena función de publicación incorporada si decide 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> 
 41
Author: AGoodDisplayName,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-10-12 15:27:17

Esta es una vieja pregunta, pero ninguna de las respuestas satisface la petición en su totalidad. Así que estoy agregando otra respuesta.

El código solicitado, según tengo entendido, solo debe hacer un cambio en la forma en que funcionan los hipervínculos normales: se debe usar el método POST en lugar de GET. Las consecuencias inmediatas serían:

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

Estoy usando jquery aquí, pero esto podría hacerse con api nativas (más difícil y más largo, 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 tiene guardado lo anterior.

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

<h2>Post</h2>
<pre>
<?php print_r($_POST); ?>
</pre>
 22
Author: Majid Fouladpour,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-30 00:32:37

Otro ejemplo de trabajo, usando un enfoque similar publicado : crear un formulario html, usar javascript para simular el mensaje. 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();
 10
Author: Quannt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-24 03:46:48

Esto no es posible usando HTML sin procesar, aunque podría usar jQuery para agregar un controlador de eventos click al enlace que podría usar la función post para emitir el MENSAJE.

 4
Author: Justin Ethier,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-10-12 14:55:16

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

Dado que pasé mucho tiempo para entender todas estas respuestas, y ya que todas ellas 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 otro lugar de la página. No importa en qué parte del cuerpo de la página esté el formulario colocar.

El código del formulario:

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

Descripción:

El display: none oculta la forma. Alternativamente, puede ponerlo en un div u otro elemento y establecer el display: none en el elemento.

El type="hidden" creará un archivo que no se mostrará, pero sus datos se transmitirán a la acción cada vez ( 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 href solo apunta a la misma página. Pero realmente no importa en este caso ya que el return false detendrá el navegador de seguir 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.

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

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

 3
Author: MakisH,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:47:21

Puede usar esta función de 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/)

 2
Author: DarkThanos,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-12 21:46:56

Compruebe esto le ayudará

$().redirect('test.php', {'a': 'value1', 'b': 'value2'});
 0
Author: Shoaib Quraishi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-26 05:39:25