Erstellen Sie einen Link mit POST anstelle von GET

204

Ich bin mir nicht sicher, ob das überhaupt möglich ist. Aber ich habe mich gefragt, ob jemand weiß, wie man einen Hyperlink dazu bringt, einige Variablen zu übergeben und POST (wie ein Formular) im Gegensatz zu GET zu verwenden.

javascript  html  http 
— Elliot
quelle
HTML kann das nicht. JavaScript kann das Klickereignis auf dem Link abfangen und tun, was Sie wollen, wenn Sie HTML nicht ändern können, und CSS kann Schaltflächen wie Links formatieren, wenn es nur um das Erscheinungsbild geht.
— Sylvain

Antworten:

98

Sie erstellen ein Formular mit versteckten Eingängen , die die Werte halten geschrieben, stellen Sie die zu Aktion des Formulars an die Ziel - URL, und die Form Methode zur Post . Wenn Sie dann auf Ihren Link klicken, lösen Sie eine JS-Funktion aus, die das Formular sendet.

Sehen Sie hier , für ein Beispiel. In diesem Beispiel wird reines JavaScript ohne jQuery verwendet. Sie können dies auswählen, wenn Sie nicht mehr installieren möchten, als Sie bereits haben.

<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
quelle
16
Warum ist dies die akzeptierte Antwort? In der Frage wird speziell nach der Verwendung von POST (wie einem Formular) im Gegensatz zu GET gefragt. In dieser Antwort heißt es jedoch " Aktion auf die Ziel-URL und die abzurufende Methode festlegen ".
— Majid Fouladpour
3
Ich verstehe das. Was ich nicht verstehe, ist Folgendes: Wir machen uns die Mühe, ein verstecktes Formular zu erstellen, damit wir POSTEN können. Warum schlagen Sie dann nach dem Erstellen des Formulars vor, die Methode auf GETfestzulegen? Wir hatten getohne die Form, nicht wahr?
— Majid Fouladpour
3
Du hast recht. Das war ein Fehler, aber irgendwie hat das OP es immer noch richtig gemacht (wahrscheinlich wegen des enthaltenen Links, der viel klarer ist). Vielen Dank für den Hinweis. Ich habe das komplett umformuliert.
— Palantir
3
Ich habe Ihre Antwort aktualisiert, um einen moderneren Ansatz zu verwenden. Wenn Sie nicht einverstanden sind, können Sie diese Bearbeitung rückgängig machen.
— Michał Perłakowski
3
Es gibt keinen Grund, Javascript in diesen Prozess einzubeziehen. Warum ist dies die akzeptierte Antwort?
— Shacker
322

Sie benötigen dafür kein JavaScript. Ich wollte das nur klarstellen, da zum Zeitpunkt der Veröffentlichung dieser Antwort alle Antworten auf diese Frage auf die eine oder andere Weise die Verwendung von JavaScript beinhalten.

Sie können dies mit reinem HTML und CSS ziemlich einfach tun, indem Sie ein Formular mit ausgeblendeten Feldern erstellen, die die Daten enthalten, die Sie senden möchten, und dann die Schaltfläche "Senden" des Formulars so gestalten, dass es wie ein Link aussieht.

Beispielsweise:

.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>
Erweitern Sie das Snippet

Das genaue CSS, das Sie verwenden, kann variieren, je nachdem, wie reguläre Links auf Ihrer Website gestaltet sind.

— Ajedi32
quelle
4
einverstanden. Ich brauchte eine Möglichkeit, dies in einer E-Mail zu tun, daher war JS für mich keine gute Option. Dies sollte perfekt funktionieren
— SynackSA
7
Ich kann das nur einmal positiv bewerten. Das ist fast so traurig wie die Tatsache, dass 99,728% aller HTML-Fragen mit Javascript- oder jQuery-Problemen verwechselt werden.
— Rab
3
Dies ist sicher eine einfache Möglichkeit, eine Schaltfläche zu verwenden, die wie ein Link aussieht, aber tatsächlich hartcodiert ist. Sie müssen die Bedingungen, unter denen diese Schaltfläche ausgeführt wird, genau kennen und sie für jeden Fall explizit festlegen. Ich denke, dass die Antworten, die auf JS / JQuery basieren, allgemeiner sind, da sie das Link-Element selbst (oder welches Element auch immer) verwenden.
— MakisH
2
@ Ajedi32 Entschuldigung, mein Kommentar war nicht so klar: Ich versuche hauptsächlich zu sagen, dass diese Schaltfläche speziell so gestaltet ist, dass sie wie ein <a> -Element aussieht. Wenn Sie die Schaltfläche jedoch um andere <a> -Elemente legen, die unterschiedlich gestaltet sind, z. B. in verschiedenen Teilen der Seite, müssen Sie alle CSS-Regeln der <a> auch für die Schaltfläche duplizieren, um Regeln für Hover, Besuch usw. zu erstellen. Sonst wird es natürlich den Job machen, aber es wird hässlich aussehen. Mit den anderen Lösungen müssen Sie einfach kein CSS ändern, sondern erhalten nur ein <a> -Element wie alle anderen, die Sie bereits haben. Natürlich hat reines HTML auch einige Vorteile.
— MakisH
1
@ Robert AFAIK, keine der anderen vorgeschlagenen Lösungen funktioniert auch mit einem mittleren Klick. Wenn Sie wirklich pedantisch sein möchten, können Sie sagen, dass das Senden einer POST-Anfrage mit einem Link unmöglich ist. Sie können POST-Anfragen nur mit Formularen und JavaScript senden.
— Ajedi32
48

Sie können Javascript-Funktionen verwenden. JQuery hat eine nette Post-Funktion eingebaut, wenn Sie sich dafür entscheiden, sie zu verwenden:

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
quelle
5
Dadurch wird die POST-Anforderung zwar angefordert, ich konnte sie jedoch nicht verwenden, da ich immer noch zum Speicherort "Whatever.php" gehen muss.
— Chris
6
$.post('page.php', {param: 1}, function() { window.location.href = 'page'.php' });
— JREAM
1
@mplungjan href sagt , wo der Link sich bezieht, während ich damit einverstanden , dass es zu verwirren Verhalten und Inhalt falsch ist, in diesem Fall Javascript ist die Referenz. Mit anderen Worten: "Wenn Sie auf den Link klicken, wird ein Postback mit JavaScript durchgeführt." Dies hat mehr Bedeutung als das Binden eines Klickereignisses. Harte Regeln wie "Verwenden Sie niemals Javascript in href" sind so schlecht wie jede andere schlechte Praxis.
— Menol
@ Menol Ich sagte: nicht empfohlen. - nicht "nie benutzen". Wenn Sie wirklich wollen, können Sie tun <a href="whyjavascript.html" id="postIt">Click Here</a>und haben$("#postIt").on("click",function(e) { e.preventDefault(); $.post("WhateverPage.php", { name: "John", time: "2pm" } ); });
— mplungjan
1
@mplungjan Diese Empfehlung wird wie jede andere eingeführt, um verwirrende Inhalte / Verhaltensweisen zu vermeiden. Wenn eine Empfehlung in Fällen vorgebracht wird, die außerhalb des beabsichtigten Geltungsbereichs liegen, wird sie als harte Regel angezeigt. Das Beispiel, das Sie gegeben haben, scheint eine Extrameile zu gehen, nur um auf der sicheren Seite der "Regel" zu sein, damit in Zukunft niemand dem Programmierer die Schuld geben kann, aber diese Sicherheit wird auf Kosten der Lesbarkeit und Bedeutung erreicht. Es ist nur so, wie es einem anderen pragmatischen Entwickler erscheint, aber ich bin sicher, dass Sie das nicht so gemeint haben.
— Menol
24

Dies ist eine alte Frage, aber keine der Antworten erfüllt die Anfrage vollständig. Also füge ich eine weitere Antwort hinzu.

Der angeforderte Code sollte meines Wissens nur eine Änderung an der Funktionsweise normaler Hyperlinks vornehmen: Die POSTMethode sollte anstelle von verwendet werden GET. Die unmittelbaren Auswirkungen wären:

  1. Wenn auf den Link geklickt wird, sollten wir die Registerkarte in die URL des laden href
  2. Da die Methode POST ist, sollte die URL der von uns geladenen Zielseite keine Abfragezeichenfolge enthalten
  3. Diese Seite sollte die Daten in Parametern (Namen und Wert) von erhalten POST

Ich benutze hier jquery, aber dies könnte mit nativen apis gemacht werden (härter und natürlich länger).

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

Um das Ergebnis anzuzeigen, speichern Sie Folgendes als Reflector.php in demselben Verzeichnis, in dem Sie das oben Gespeicherte gespeichert haben.

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

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

Ein weiteres Arbeitsbeispiel mit einem ähnlichen Ansatz: Erstellen Sie ein HTML-Formular und simulieren Sie den Beitrag mit Javascript. Dies bewirkt zwei Dinge: Daten auf einer neuen Seite veröffentlichen und in einem neuen Fenster / einer neuen Registerkarte öffnen.

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

HTML + JQuery : Ein Link, der ein verstecktes Formular mit POST sendet.

Da ich viel Zeit damit verbracht habe, all diese Antworten zu verstehen, und da alle einige interessante Details enthalten, ist hier die kombinierte Version, die schließlich für mich funktioniert hat und die ich wegen ihrer Einfachheit bevorzuge.

Mein Ansatz ist es erneut, ein verstecktes Formular zu erstellen und es durch Klicken auf einen Link an einer anderen Stelle auf der Seite einzureichen. Es spielt keine Rolle, wo im Hauptteil der Seite das Formular platziert wird.

Der Code für das Formular:

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

Beschreibung:

Das display: noneversteckt die Form. Sie können es alternativ in ein div oder ein anderes Element einfügen und das display: noneauf das Element setzen.

Das type="hidden"erstellt ein Feld, das nicht angezeigt wird, dessen Daten jedoch trotzdem an die Aktion übertragen werden ( siehe W3C ). Ich verstehe, dass dies der einfachste Eingabetyp ist.

Der Code für den Link:

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

Beschreibung:

Das leere Ziel zielthref nur auf dieselbe Seite ab . In diesem Fall spielt es jedoch keine Rolle, da return falseder Browser dadurch nicht mehr dem Link folgen kann. Möglicherweise möchten Sie dieses Verhalten natürlich ändern. In meinem speziellen Fall enthielt die Aktion am Ende eine Umleitung.

Das onclickwurde verwendet , zu vermeiden , mit href="javascript:..."wie durch mplungjan bemerkt . Das $('#myHiddenFormId').submit();wurde zum Senden des Formulars verwendet (anstatt eine Funktion zu definieren, da der Code sehr klein ist).

Dieser Link sieht genauso aus wie jedes andere <a>Element. Sie können tatsächlich jedes andere Element anstelle von <a>(zum Beispiel ein <span>oder ein Bild) verwenden.

— MakisH
quelle
2

Sie können diese jQuery-Funktion verwenden

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();
}

Hier ist ein Beispiel in jsFiddle ( http://jsfiddle.net/S7zUm/ )

— DarkThanos
quelle
@DaoLam der Code funktioniert tatsächlich. Ich habe den Wert in phpref durch leserged.free.fr/phpinfo.php ersetzt und das Formular an diese Site gesendet, wobei die Werte übergeben wurden.
— JSWilson
2

Wie in vielen Beiträgen erwähnt, ist dies nicht direkt möglich, aber ein einfacher und erfolgreicher Weg ist wie folgt: Zuerst fügen wir ein Formular in den Hauptteil unserer HTML-Seite ein, das keine Schaltflächen für die Übermittlung und auch deren Eingaben enthält sind versteckt. Dann verwenden wir eine Javascript-Funktion, um die Daten abzurufen und das Formular zu senden. Einer der Vorteile dieser Methode besteht darin, auf andere Seiten umzuleiten, was vom serverseitigen Code abhängt. Der Code lautet wie folgt: und jetzt überall dort, wo Sie eine "POST" -Methode benötigen:

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

Ich schlage einen dynamischeren Ansatz vor, ohne HTML-Codierung in die Seite, halten Sie es streng 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
quelle
0

Anstelle von Javascript können Sie auch ein Etikett verwenden, das ein verstecktes Formular sendet. Sehr einfache und kleine Lösung. Das Etikett kann sich überall in Ihrem HTML befinden.

<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>
Erweitern Sie das Snippet

— Gladhon
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.