Heim > Web-Frontend > js-Tutorial > js steuert die Verwendung von Formular-Tags zum Definieren und Senden von Daten

js steuert die Verwendung von Formular-Tags zum Definieren und Senden von Daten

php是最好的语言
Freigeben: 2018-08-03 09:28:01
Original
1777 Leute haben es durchsucht

Für die Formularübermittlung gab es zuvor eine Download-Projektschnittstelle, die das Hochladen vieler Dinge auf die URL erforderte, aber die URL hat eine Längenbeschränkung. Die URL-Längenbeschränkung ist daher bei jedem Browser unterschiedlich Ich habe darüber nachgedacht, das Formular zu verwenden. Die Formularaktion sendet das Formular.

Formular-Tag Definition und Verwendung Für Details klicken Sie bitte auf
Das

-Tag wird zum Erstellen von HTML-Formularen für Benutzereingaben verwendet.

Formulare können Eingabeelemente wie Textfelder, Kontrollkästchen, Optionsfelder, Senden-Schaltflächen usw. enthalten.

Formulare können auch Menü-, Textbereichs-, Feldsatz-, Legenden- und Beschriftungselemente enthalten.

Formulare dienen der Übermittlung von Daten an den Server. (Was wir verwenden möchten)

Verwendung von Formularübermittlungsdaten

Hier schreibe ich ein Formularübermittlungsformular mit js, um Ereignisse aufzurufen. Beispiel für ein Formular, das nicht auf der Seite angezeigt wird.

Das Attribut Methode des Form-Tags im Code unten ist dasselbe wie die Anforderungsmethode von jquerys Ajax. Hier verwende ich Post Request , Das Attribut enctype des Formular-Tags gibt an, wie die Formulardaten vor dem Senden codiert werden. Das Attribut target="_blank" des Das Formular-Tag entspricht dem Öffnen einer neuen Seite. Ich lade es hier herunter, also muss ich es auf einer neuen Seite öffnen.

 <form method="post" enctype="application/x-www-form-urlencoded" id="form-submit" target="_blank">
   <input type="hidden" name="account" value="多毛大叔爱萝莉"/>
   <input type="hidden" name="password" value="7758521"/>
</form>
<button type="button" id="go">go</button>//这里的name就是相当于post属性的参数 value就是你传的值 type是hidden 是因为我不想再页面上看到他所以让他隐藏了
Nach dem Login kopieren
Nach dem Login kopieren

Als nächstes verwenden wir js, um das Ereignis aufzurufen und fügen dynamisch das Attribut action zu form hinzu, um dem Formular mitzuteilen, dass wir möchten, dass er eine Stelle anfordert.

// js 获取form表单var form_submit = document.getElementById(&#39;form-submit&#39;);// js获取按钮var go = document.getElementById(&#39;go&#39;);// 当点击go时执行事件go.addEventListener(&#39;click&#39;,function(){
  // 动态给form表单设置请求位置
  form_submit.active = "http://www.daxuehua.cn";  // 让form表单提交
  form_submit.submit()
})
Nach dem Login kopieren
Nach dem Login kopieren

Auf diese Weise können Sie das Problem lösen, dass Dinge nicht heruntergeladen werden können, wenn der URL-Wert zu lang ist

Formular beim Absenden des Formulars wurde ein Download durchgeführt Vorherige Projektschnittstelle, es gibt viele Dinge, die in die URL hochgeladen werden müssen, aber URL hat eine begrenzte Länge Die URL-Längenbeschränkung ist bei jedem Browser unterschiedlich, daher habe ich darüber nachgedacht, die Formular-Formular-Aktion zu verwenden um das Formular abzusenden.

form-Tag Definition und Verwendung Für Einzelheiten klicken Sie bitte auf

-Tag wird zum Erstellen von HTML-Formularen für Benutzereingaben verwendet.

Formulare können Eingabeelemente wie Textfelder, Kontrollkästchen, Optionsfelder, Senden-Schaltflächen usw. enthalten.

Formulare können auch Menü-, Textbereichs-, Feldsatz-, Legenden- und Beschriftungselemente enthalten.

Formulare dienen der Übermittlung von Daten an den Server. (Was wir verwenden möchten)

Verwendung von Formularübermittlungsdaten

Hier schreibe ich ein Formularübermittlungsformular mit js, um Ereignisse aufzurufen. Beispiel für ein Formular, das nicht auf der Seite angezeigt wird.

Das Attribut Methode des Form-Tags im Code unten ist dasselbe wie die Anforderungsmethode von jquerys Ajax. Hier verwende ich Post Request , Das Attribut enctype des Formular-Tags gibt an, wie die Formulardaten vor dem Senden codiert werden. Das Attribut target="_blank" des Das Formular-Tag entspricht dem Öffnen einer neuen Seite. Ich lade es hier herunter, also muss ich es auf einer neuen Seite öffnen.

 <form method="post" enctype="application/x-www-form-urlencoded" id="form-submit" target="_blank">
   <input type="hidden" name="account" value="多毛大叔爱萝莉"/>
   <input type="hidden" name="password" value="7758521"/>
</form>
<button type="button" id="go">go</button>//这里的name就是相当于post属性的参数 value就是你传的值 type是hidden 是因为我不想再页面上看到他所以让他隐藏了
Nach dem Login kopieren
Nach dem Login kopieren

Als nächstes verwenden wir js, um das Ereignis aufzurufen und fügen dynamisch das Attribut action zu form hinzu, um dem Formular mitzuteilen, dass wir möchten, dass er eine Stelle anfordert.

// js 获取form表单var form_submit = document.getElementById(&#39;form-submit&#39;);// js获取按钮var go = document.getElementById(&#39;go&#39;);// 当点击go时执行事件go.addEventListener(&#39;click&#39;,function(){
  // 动态给form表单设置请求位置
  form_submit.active = "http://www.daxuehua.cn";  // 让form表单提交
  form_submit.submit()
})
Nach dem Login kopieren
Nach dem Login kopieren

Auf diese Weise können Sie das Problem lösen, dass Dinge nicht heruntergeladen werden können, wenn der URL-Wert zu lang ist

Verwandte Artikel:

javascript – So implementieren Sie die Formularübermittlung, indem Sie „submit“ außerhalb des Formular-Tags platzieren

JS-Methode zum Implementieren eines Tag-Hyperlinks zum Senden eines Formularformulars

Das obige ist der detaillierte Inhalt vonjs steuert die Verwendung von Formular-Tags zum Definieren und Senden von Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage