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.
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.
Respuestas:
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>
GET
? Tuvimos get
sin la forma, ¿no?
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>
El CSS exacto que use puede variar según el estilo de los enlaces regulares en su sitio.
Puedes usar las funciones de JavaScript. JQuery tiene una buena función de publicación incorporada si decides usarla:
<script language="javascript">
function DoPost(){
$.post("WhateverPage.php", { name: "John", time: "2pm" } ); //Your values here..
}
</script>
<a href="javascript:DoPost()">Click Here</A>
$.post('page.php', {param: 1}, function() { window.location.href = 'page'.php' });
<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" } ); });
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 POST
método debe usarse en lugar de GET
. Las implicaciones inmediatas serían:
href
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>
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();
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: none
oculta la forma. Alternativamente, puede ponerlo en un elemento div u otro y establecerlo 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 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 href
solo apunta a la misma página . Pero realmente no importa en este caso, ya que return false
impedirá 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 onclick
utilizó 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).
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/ )
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>
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()
})
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>
Mira esto te ayudará
$().redirect('test.php', {'a': 'value1', 'b': 'value2'});