Non sono sicuro che sia possibile. Ma mi chiedevo se qualcuno sa come far passare un collegamento ipertestuale ad alcune variabili e usare POST (come un modulo) invece di GET.
Risposte:
È possibile creare un modulo con input nascosti che contengono i valori da registrare, impostare l' azione del modulo sull'URL di destinazione e il metodo del modulo da pubblicare . Quindi, quando si fa clic sul collegamento, attivare una funzione JS che invia il modulo.
Vedi qui , per un esempio. Questo esempio utilizza JavaScript puro, senza jQuery: è possibile scegliere questo se non si desidera installare nulla di più di quello che già si possiede.
<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? Avevamo getsenza il modulo, no?
Non è necessario JavaScript per questo. Volevo solo chiarirlo, dal momento in cui questa risposta è stata pubblicata, tutte le risposte a questa domanda implicano l'uso di JavaScript in un modo o nell'altro.
Puoi farlo piuttosto facilmente con HTML e CSS puri creando un modulo con campi nascosti contenente i dati che desideri inviare, quindi assegnando lo stile al pulsante di invio del modulo in modo che appaia come un collegamento.
Per esempio:
.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>Il CSS esatto che usi può variare a seconda di come vengono disegnati i link regolari sul tuo sito.
Puoi usare le funzioni javascript. JQuery ha una bella funzione post integrata se decidi di 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>e avere$("#postIt").on("click",function(e) { e.preventDefault(); $.post("WhateverPage.php", { name: "John", time: "2pm" } ); });
Questa è una vecchia domanda, ma nessuna delle risposte soddisfa pienamente la richiesta. Quindi sto aggiungendo un'altra risposta.
Il codice richiesto, a quanto ho capito, dovrebbe apportare una sola modifica al modo in cui funzionano i normali collegamenti ipertestuali: il POSTmetodo dovrebbe essere utilizzato invece di GET. Le implicazioni immediate sarebbero:
hrefPOSTSto usando jquery qui, ma questo potrebbe essere fatto con le API native (più difficile e più a lungo ovviamente).
<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>E per vedere il risultato, salva quanto segue come reflector.php nella stessa directory che hai salvato sopra.
<h2>Get</h2>
<pre>
<?php print_r($_GET); ?>
</pre>
<h2>Post</h2>
<pre>
<?php print_r($_POST); ?>
</pre>Un altro esempio funzionante, usando un approccio simile pubblicato: crea un modulo html, usa javascript per simulare il post. Questo fa 2 cose: pubblica i dati in una nuova pagina e aprili in una nuova finestra / scheda.
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 collegamento che invia un modulo nascosto con POST.
Dal momento che ho trascorso molto tempo a comprendere tutte queste risposte, e dato che hanno tutti alcuni dettagli interessanti, ecco la versione combinata che finalmente ha funzionato per me e che preferisco per la sua semplicità.
Il mio approccio è di nuovo quello di creare un modulo nascosto e inviarlo facendo clic su un collegamento altrove nella pagina. Non importa in quale parte del corpo della pagina verrà posizionato il modulo.
Il codice per il modulo:
<form id="myHiddenFormId" action="myAction.php" method="post" style="display: none">
<input type="hidden" name="myParameterName" value="myParameterValue">
</form>Descrizione:
Il display: nonenasconde la forma. In alternativa, puoi inserirlo in un div o in un altro elemento e impostare display: nonel'elemento on.
La type="hidden"creerà un fild che non verrà mostrato ma i suoi dati saranno trasmessi ai eitherways azione ( vedi W3C ). Capisco che questo è il tipo di input più semplice.
Il codice per il collegamento:
<a href="" onclick="$('#myHiddenFormId').submit(); return false;" title="My link title">My link text</a>Descrizione:
Il vuoto ha hrefcome target solo la stessa pagina . Ma in questo caso non importa, poiché return falseimpedirà al browser di seguire il collegamento. Potresti voler cambiare questo comportamento ovviamente. Nel mio caso specifico, l'azione conteneva un reindirizzamento alla fine.
È onclickstato usato per evitare l'uso href="javascript:..."come notato da mplungjan . È $('#myHiddenFormId').submit();stato usato per inviare il modulo (invece di definire una funzione, poiché il codice è molto piccolo).
Questo link apparirà esattamente come qualsiasi altro <a>elemento. Puoi effettivamente utilizzare qualsiasi altro elemento invece di <a>(ad esempio una <span>o un'immagine).
È possibile utilizzare questa funzione 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();
}Ecco un esempio in jsFiddle ( http://jsfiddle.net/S7zUm/ )
Come menzionato in molti post, questo non è direttamente possibile, ma un modo semplice e di successo è il seguente: Innanzitutto, inseriamo un modulo nel corpo della nostra pagina html, che non ha pulsanti per l'invio, e anche i suoi input sono nascosti. Quindi utilizziamo una funzione JavaScript per ottenere i dati e, inviare il modulo. Uno dei vantaggi di questo metodo è il reindirizzamento ad altre pagine, che dipende dal codice lato server. Il codice è il seguente: e ora dovunque sia necessario un metodo "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>Suggerisco un approccio più dinamico, senza la codifica HTML nella pagina, tenerlo rigorosamente 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()
})Invece usando javascript, puoi anche usare un'etichetta che invia un modulo nascosto. Soluzione molto semplice e piccola. L'etichetta può essere ovunque nel tuo 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>Controlla questo ti aiuterà
$().redirect('test.php', {'a': 'value1', 'b': 'value2'});