Kann eine HTML-Schaltfläche eine POST-Anforderung ausführen?

74

Ich möchte, dass eine Schaltfläche zum Senden eines Postens eine POST-Anfrage sendet.

Ich denke über so etwas nach:

<form action = "" method = "post">
    <button>Upvote</button>
<form>

Dabei wird die Zeichenfolge "Upvote" als Name in der POST-Anfrage gesendet.

Ich weiß, dass dies nicht funktioniert, und ich weiß, dass es Möglichkeiten gibt, AJAX (Javascript) zu verwenden, aber ich bin ziemlich neu in diesem Bereich. Ich frage mich nur, ob dies überhaupt möglich ist.

Aktualisieren

Jemand schlägt vor, dass <input>ich Tag verwendet habe. Das Problem ist, dass eher ein GET als ein POST generiert wird.

Dorafmon
quelle
Ich glaube, es wird die Upvote-Zeichenfolge nicht auf dem Server veröffentlicht. Ich werde es jetzt versuchen
Dorafmon
Sie benötigen js Unterstützung wie jquery $ .post
Farmern1992
3
Sie müssen die Schaltfläche "Senden" verwenden: <button type="submit">Send it</button>Der Rest Ihres Codes sieht gut aus (mit Ausnahme der Leerzeichen). Das Aktionsfeld enthält die URL der gewünschten Serverressource, die die Daten zur weiteren Verarbeitung verwendet.
Imperativ
3
Sie müssen sich wirklich die Zeit nehmen, um sich mit HTML-Formularen vertraut zu machen .
Oded
3
Natürlich. Und ich verweise Sie auf eine großartige Lernressource.
Oded

Antworten:

46

Dies kann mit einem Eingabeelement vom Typ "submit" erfolgen. Dies wird dem Benutzer als Schaltfläche angezeigt, und durch Klicken auf die Schaltfläche wird das Formular gesendet.

<form action="" method="post">
    <input type="submit" name="upvote" value="Upvote" />
</form>
Filip Minx
quelle
63

Sie müssen der Schaltfläche einen Namen und einen Wert geben.

Ohne Namen kann kein Steuerelement gesendet werden, und der Inhalt eines Schaltflächenelements ist die Bezeichnung und nicht der Wert.

<form action="" method="post">
    <button name="foo" value="upvote">Upvote</button>
</form>
QUentin
quelle
2
Ist es in Ordnung (browserübergreifend sicher), diese Schaltfläche ohne zu verwenden type="submit"?
Mohammed Noureldin
5
@ MohammedNoureldin - Ja, das ist es. submitist der Standardwert für das typeAttribut auf einem<button>
Quentin
9

Sie können dies mit ein wenig Hilfe von JS tun. Im folgenden Beispiel wird eine POST-Anforderung per Mausklick mit der Abrufmethode gesendet:

const button = document.getElementById('post-btn');

button.addEventListener('click', async _ => {
  try {     
    const response = await fetch('yourUrl', {
      method: 'post',
      body: {
        // Your body
      }
    });
    console.log('Completed!', response);
  } catch(err) {
    console.error(`Error: ${err}`);
  }
});
<button id="post-btn">I'm a button</button>

Jasper Lichte
quelle
3

Sie können:

  • Verwenden Sie entweder eine <input type="submit" ..>anstelle dieser Schaltfläche.
  • Oder verwenden Sie ein bisschen Javascript, um ein Formularobjekt (mit Name oder ID) zu erhalten und es aufzurufen submit(..). ZB : form.submit(). Fügen Sie diesen Code dem Ereignis zum Klicken auf die Schaltfläche hinzu. Dadurch werden die Formularparameter serialisiert und eine GET- oder POST-Anforderung ausgeführt, wie im Methodenattribut des Formulars angegeben.
UltraInstinct
quelle
Die Verwendung von <Eingabe> ... generiert eine GET-Anfrage anstelle von POST ... Ich habe es getestet
Dorafmon
<form action = "" method "post"> <input type="Submit" name="upvote" value="Upvote"/> </form>Der Code, den ich habe
Dorafmon
@dorafmon - Wenn das Formular nicht an http://127.0.0.1:8000/debate/00000001?upvote=Upvoteerster Stelle unter der URL gerendert wurde , sollten Sie dieses Ergebnis nicht erhalten.
Quentin
Ich habe zuerst angefangen debate/00000001, dann auf den Upvote-Button geklickt und dann bekomme ich die Ergebnis-URL ...
Dorafmon
Ich vermute wirklich, dass ein anderer Teil Ihrer Seite das Methodenattribut ändert.
UltraInstinct