Faire un lien utiliser POST au lieu de GET

205

Je ne sais pas si c'est même possible. Mais je me demandais si quelqu'un sait comment faire passer un hyperlien à certaines variables et utiliser POST (comme un formulaire) par opposition à GET.

javascript html http Elliot
la source
HTML ne peut pas faire ça. JavaScript peut intercepter l'événement de clic sur le lien et faire ce que vous voulez si vous ne pouvez pas changer HTML et CSS peut styliser des liens comme des liens si ce n'est qu'une question d'apparence.
sylvain

Réponses:

99

Vous créez un formulaire avec des entrées masquées qui contiennent les valeurs à publier, définissez l' action du formulaire sur l'URL de destination et la méthode du formulaire à publier . Ensuite, lorsque vous cliquez sur votre lien, déclenchez une fonction JS qui soumet le formulaire.

Voir ici , pour un exemple. Cet exemple utilise du JavaScript pur, sans jQuery - vous pouvez le choisir si vous ne voulez rien installer de plus que ce que vous avez déjà.

<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
la source
16
Pourquoi est-ce la réponse acceptée? La question demande spécifiquement d' utiliser POST (comme un formulaire) par opposition à GET , mais cette réponse dit " définir l'action sur l'URL de destination et la méthode à obtenir ".
Majid Fouladpour
3
Je comprends ça. Ce que je ne comprends pas, c'est ceci: nous nous donnons la peine de créer un formulaire caché pour que nous puissions poster, mais ensuite, une fois le formulaire créé, pourquoi proposez-vous de définir la méthode sur GET? Nous avions getsans formulaire, non?
Majid Fouladpour
3
Vous avez raison. C'était une erreur, mais d'une manière ou d'une autre, l'OP avait toujours raison (probablement à cause du lien inclus qui est beaucoup plus clair). Merci d'avoir souligné. Je l'ai reformulé entièrement.
Palantir
3
J'ai mis à jour votre réponse pour utiliser une approche plus moderne. Si vous n'êtes pas d'accord, n'hésitez pas à annuler cette modification.
Michał Perłakowski
3
Il n'y a aucune raison d'impliquer Javascript dans ce processus. Pourquoi est-ce la réponse acceptée?
shacker
323

Vous n'avez pas besoin de JavaScript pour cela. Je voulais juste que ce soit clair, car au moment où cette réponse a été publiée, toutes les réponses à cette question impliquaient l'utilisation de JavaScript d'une manière ou d'une autre.

Vous pouvez le faire assez facilement avec du HTML et du CSS purs en créant un formulaire avec des champs cachés contenant les données que vous souhaitez soumettre, puis en stylisant le bouton de soumission du formulaire pour ressembler à un lien.

Par exemple:

.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>
Développer l'extrait

Le CSS exact que vous utilisez peut varier selon le style des liens réguliers sur votre site.

Ajedi32
la source
4
D'accord. J'avais besoin d'un moyen de le faire dans un e-mail, donc JS n'était pas vraiment une option pour moi. Cela devrait fonctionner parfaitement
SynackSA
8
Je ne peux voter que pour une fois. C'est presque aussi triste que le fait que 99,728% de toutes les questions HTML finiront par être confondues avec des problèmes Javascript ou jQuery.
Rab
3
C'est à coup sûr un moyen simple d'utiliser un bouton qui ressemble à un lien, mais il s'agit en fait d'un codage en dur. Vous devez connaître exactement les conditions dans lesquelles ce bouton va vivre et les définir explicitement pour chaque cas. Je pense que les réponses basées sur JS / JQuery sont plus génériques car elles utilisent l'élément de lien lui-même (ou n'importe quel élément).
MakisH
2
@ Ajedi32 Désolé, mon commentaire n'était pas si clair: j'essaie principalement de dire que ce bouton est spécialement conçu pour ressembler à un élément <a>. Mais si vous placez le bouton autour d'autres éléments <a> de style différent, par exemple dans différentes parties de la page, vous devez dupliquer toutes les règles CSS du <a> également pour le bouton, pour créer des règles pour le survol, visité, etc. Sinon, il fera bien sûr le travail, mais il aura l'air laid. Avec les autres solutions, vous n'avez tout simplement pas besoin de changer de CSS, vous obtenez simplement un élément <a> comme tous les autres que vous avez déjà. Bien entendu, le HTML pur présente également certains avantages.
MakisH
1
@Robert AFAIK, aucune des autres solutions proposées ne fonctionne avec le clic du milieu non plus. Si vous voulez vraiment être pédant, vous pourriez dire que soumettre une demande POST avec un lien est impossible. Vous ne pouvez soumettre des demandes POST qu'avec des formulaires et JavaScript.
Ajedi32
48

Vous pouvez utiliser les fonctions javascript. JQuery a une belle fonction de publication intégrée si vous décidez de l'utiliser:

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
la source
5
Cela fait la demande POST comme demandé, mais je ne pouvais pas l'utiliser car je dois toujours aller à l'emplacement "Wwhat.php".
Chris
6
$.post('page.php', {param: 1}, function() { window.location.href = 'page'.php' });
JREAM
1
@mplungjan href indique où le lien fait référence, bien que je convienne qu'il est faux de confondre comportement et contenu, dans ce cas javascript est la référence. En d'autres termes "lorsque vous cliquez sur le lien, il effectuera une publication en utilisant JavaScript". Cela a plus de sens que de lier un événement de clic. Des règles strictes telles que «ne jamais utiliser javascript dans href» sont aussi mauvaises que toute autre mauvaise pratique.
Menol
@Menol J'ai dit: non recommandé. - pas "ne jamais utiliser". Si vous voulez vraiment vous pouvez faire <a href="whyjavascript.html" id="postIt">Click Here</a>et avoir$("#postIt").on("click",function(e) { e.preventDefault(); $.post("WhateverPage.php", { name: "John", time: "2pm" } ); });
mplungjan
1
@mplungjan cette recommandation comme toute autre est introduite pour éviter de confondre contenu / comportement. Lorsqu'une recommandation est présentée dans des cas en dehors de sa portée prévue, elle commence à apparaître comme une règle stricte. L'exemple que vous avez donné semble aller un peu plus loin pour être du bon côté de la «règle» afin que personne ne puisse blâmer le programmeur à l'avenir, mais cette sécurité est obtenue au détriment de la lisibilité et du sens. C'est juste à quoi cela ressemble pour un autre développeur pragmatique, mais je suis sûr que vous ne le pensiez pas.
Menol
24

C'est une vieille question, mais aucune des réponses ne satisfait entièrement la demande. J'ajoute donc une autre réponse.

Si je comprends bien, le code demandé ne devrait apporter qu'une seule modification au fonctionnement des hyperliens normaux: la POSTméthode doit être utilisée à la place de GET. Les implications immédiates seraient:

  1. Lorsque le lien est cliqué, nous devons recharger l'onglet dans l'url du href
  2. Comme la méthode est POST, nous ne devrions pas avoir de chaîne de requête dans l'URL de la page cible que nous chargeons
  3. Cette page doit recevoir les données des paramètres (noms et valeur) par POST

J'utilise jquery ici, mais cela pourrait être fait avec des API natives (plus difficiles et plus longues bien sûr).

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

Et pour voir le résultat, enregistrez ce qui suit en tant que reflector.php dans le même répertoire que celui ci-dessus.

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

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

Un autre exemple de travail, en utilisant une approche similaire publiée: créez un formulaire html, utilisez javascript pour simuler la publication. Cela fait 2 choses: publier des données sur une nouvelle page et les ouvrir dans une nouvelle fenêtre / un nouvel onglet.

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
la source
3

HTML + JQuery : lien qui soumet un formulaire masqué avec POST.

Depuis que j'ai passé beaucoup de temps à comprendre toutes ces réponses, et comme elles ont toutes des détails intéressants, voici la version combinée qui a finalement fonctionné pour moi et que je préfère pour sa simplicité.

Mon approche consiste à nouveau à créer un formulaire caché et à le soumettre en cliquant sur un lien ailleurs dans la page. Peu importe où dans le corps de la page le formulaire sera placé.

Le code du formulaire:

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

La description:

Le display: nonemasque le formulaire. Vous pouvez également le placer dans un div ou un autre élément et définir display: nonel'élément sur l'élément.

Le type="hidden"va créer un fild qui ne sera pas affiché mais ses données seront transmises à l'action de toute façon ( voir W3C ). Je comprends que c'est le type d'entrée le plus simple.

Le code du lien:

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

La description:

Le vide hrefne cible que la même page . Mais cela n'a pas vraiment d'importance dans ce cas, car return falsecela empêchera le navigateur de suivre le lien. Vous pouvez bien sûr changer ce comportement. Dans mon cas spécifique, l'action contenait une redirection à la fin.

Le a onclickété utilisé pour éviter d'utiliser href="javascript:..."comme indiqué par mplungjan . Le a $('#myHiddenFormId').submit();été utilisé pour soumettre le formulaire (au lieu de définir une fonction, car le code est très petit).

Ce lien ressemblera exactement à tout autre <a>élément. Vous pouvez réellement utiliser n'importe quel autre élément à la place de <a>(par exemple un <span>ou une image).

MakisH
la source
2

Vous pouvez utiliser cette fonction 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();
}

Voici un exemple dans jsFiddle ( http://jsfiddle.net/S7zUm/ )

DarkThanos
la source
@DaoLam le code fonctionne réellement. J'ai substitué leserged.free.fr/phpinfo.php à la valeur en phpref et il a posté le formulaire sur ce site en passant les valeurs.
JSWilson
2

Comme mentionné dans de nombreux articles, ce n'est pas directement possible, mais un moyen simple et efficace est le suivant: Tout d'abord, nous mettons un formulaire dans le corps de notre page html, qui n'a pas de boutons pour la soumission, ainsi que ses entrées sont cachés. Ensuite, nous utilisons une fonction javascript pour obtenir les données et envoyer le formulaire. L'un des avantages de cette méthode est de rediriger vers d'autres pages, qui dépend du code côté serveur. Le code est le suivant: et maintenant, partout où vous avez besoin d'un pour être dans la méthode "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
la source
1

Je suggère une approche plus dynamique, sans codage html dans la page, gardez-la strictement 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
la source
0

Au lieu d'utiliser javascript, vous pouvez également utiliser une étiquette envoyant un formulaire masqué. Solution très simple et petite. L'étiquette peut être n'importe où dans votre 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>
Développer l'extrait

Gladhon
la source
-1

Vérifiez cela, cela vous aidera 

$().redirect('test.php', {'a': 'value1', 'b': 'value2'});
Shoaib Quraishi
la source
2
Vous devez mentionner que cette solution nécessite la bibliothèque suivante: github.com/mgalante/jquery.redirect
Felix G.