web-dev-qa-db-fra.com

Faites un lien utilisez POST au lieu de GET

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

179
Elliot

Vous créez un formulaire avec des entrées masquées contenant les valeurs à publier, définissez l'action du formulaire sur l'URL de destination et la méthode de formulaire sur post . Ensuite, lorsque votre lien est cliqué, 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 souhaitez pas installer autre chose 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>
88
Palantir

Vous n'avez pas besoin de JavaScript pour cela. Je voulais juste que ce soit clair, car à la date de publication de cette réponse, all des réponses à cette question implique l'utilisation de JavaScript d'une manière ou d'une autre.

Vous pouvez le faire assez facilement avec du HTML pur et du CSS en créant un formulaire avec des champs cachés contenant les données que vous souhaitez soumettre, puis en stylisant le bouton d'envoi de la forme à 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>

Le code CSS exact que vous utilisez peut varier en fonction du style des liens habituels sur votre site.

280
Ajedi32

Vous pouvez utiliser les fonctions javascript. JQuery a une fonction Nice post 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> 
42
AGoodDisplayName

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

Si j'ai bien compris, le code demandé ne devrait modifier que le fonctionnement des liens hypertexte habituels: la méthode POST devrait être utilisée à la place de GET. Les implications immédiates seraient:

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

J'utilise jQuery ici, mais cela pourrait être fait avec des apis natifs (plus durs et plus longs 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 sous le nom 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>
24
Majid Fouladpour

Un autre exemple de travail, utilisant une approche similaire publiée: créez un formulaire HTML, utilisez javascript pour simuler la publication. Cela fait 2 choses: publier les données sur une nouvelle page et l’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();
10
Quannt

Cela n’est pas possible avec du code HTML brut, bien que vous puissiez utiliser jQuery pour ajouter un gestionnaire d’événements click au lien pouvant utiliser la fonction post pour émettre le POST.

4
Justin Ethier

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

Depuis que j'ai passé beaucoup de temps à comprendre toutes ces réponses, et puisqu'elles ont toutes quelques 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 masqué et à le soumettre en cliquant sur un lien situé ailleurs dans la page. Peu importe où le formulaire sera placé dans le corps de la page.

Le code du formulaire:

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

Description:

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

Le type="hidden" créera 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>

Description:

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

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

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

3
MakisH

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

2
DarkThanos

Comme mentionné dans de nombreux articles, ceci n’est pas directement possible, mais voici un moyen simple et efficace: Tout d’abord, nous mettons un formulaire dans le corps de notre page HTML, qui ne contient aucun bouton 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épendent du code côté serveur. Le code est le suivant: et maintenant partout où vous avez besoin d'une 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>
0
Mahdi Firouzjah

Vérifiez que cela vous aidera

$().redirect('test.php', {'a': 'value1', 'b': 'value2'});
0
Shoaib Quraishi