javascript - funcion - Haga un enlace use POST en lugar de GET
javascript confirm submit (9)
Comprueba esto te ayudará
$().redirect(''test.php'', {''a'': ''value1'', ''b'': ''value2''});
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.
Crea un formulario con entradas ocultas que contienen los valores que se publicarán, establezca la acción del formulario en la url de destino y el método de formulario para publicar . Luego, cuando se haga clic en su enlace, active una función JS que envíe el formulario.
Vea here , 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>
Esta es una pregunta antigua, pero ninguna de las respuestas satisface la solicitud 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 lugar de GET . Las implicaciones inmediatas serían:
- Cuando se hace clic en el enlace, debemos volver a cargar la pestaña en la URL del
href - 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
- 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 nativos (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 en el que guardó lo anterior.
<h2>Get</h2>
<pre>
<?php print_r($_GET); ?>
</pre>
<h2>Post</h2>
<pre>
<?php print_r($_POST); ?>
</pre>
Esto no es posible con HTML sin procesar, aunque podría usar jQuery para agregar un manejador de eventos de click al enlace que podría usar la función de publicación para emitir el POST.
Otro ejemplo de trabajo, usando un enfoque similar publicado: crear un formulario html, usar javascript para simular la publicación. Esto hace dos cosas: publicar datos en una página nueva 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();
Puede usar 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>
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/ )
HTML + JQuery : un enlace que envía un formulario oculto con POST.
Ya que dediqué mucho tiempo a entender todas estas respuestas, y dado 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 volver a 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 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:
La display: none oculta la forma. Alternativamente, puede ponerlo en un elemento div u otro y establecer la 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 cualquier manera ( 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 href vacío solo apunta a la misma página . Pero en realidad no importa en este caso, ya que la 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.
El onclick se usó para evitar el uso de href="javascript:..." como lo notó mplungjan . El $(''#myHiddenFormId'').submit(); se 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 elemento <a> . En realidad, puede usar cualquier otro elemento en lugar de <a> (por ejemplo, un <span> o una imagen).
No necesitas JavaScript para esto. Solo quería dejar eso en 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 forma u otra.
Puede hacerlo fácilmente con HTML y CSS puros creando un formulario con campos ocultos que contengan los datos que desea enviar, luego diseñe el botón de enviar 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 utiliza puede variar según cómo se diseñen los enlaces regulares en su sitio.