Als ich es zuvor schrieb, als ich diese Demo abgeschlossen habe, stellte ich fest, dass jetzt nicht jeder Ajax mehr verwendet, um das gemeinsame Menü zu vervollständigen. Tatsächlich ist die Demo des Autors nicht dazu gedacht, dies zu vervollständigen. Die Hauptlernrichtung des Autors ist die Geschäftslogikentwicklung des Javaweb -Hintergrunds. Wenn Sie jedoch im Hintergrund arbeiten, müssen Sie jedoch noch ein gewisses Verständnis für das Front-End haben, insbesondere für die Technologie der Einreichung von asynchronen Daten wie Ajax müssen verstanden und gemeistert werden. Hier verwende ich also ein verkettetes Menü, um die asynchrone Einreichung von Ajax zu üben, und dann werde ich mehrere Demos des asynchronen Einreichungsformulars schreiben.
Der Hintergrund des Autors verwendet das Frühlingsrahmen für Spring+SpringMVC. Dieser Teil wird hier nicht erklärt, der Fokus liegt auf JQuery und Ajax.
Laden Sie zunächst die Ressource jQuery.js herunter
JQuery Official Website Link
Zweitens importieren Sie den heruntergeladenen jQuery.js in das Projekt
In einem Javaweb-Projekt stellen Sie es einfach in WebContent (Sie können auch Ihren eigenen Ordner erstellen, aber nicht in die Web-inf-Datei eingeben).
Drittens beginnen Sie mit dem Schreiben von Code
Erstellen Sie eine neue JSP -Datei
Der Code ist wie folgt
<%@page import = "java.util.map"%> <%@page import = "java.util.list"%> <%@page Language = "java" contentType = "text/html; charset = utf-8" pageencoding = "utf-8"%> <! docTtm html public "-/// W3C // dtd html html 4.0 //// W3C // dtddml 4.0 //// W3C // Dtdhtm01 Transitional // en "" http://www.w3.org/tr/html4/loose.dtd"><Html><Head><Meta http-äquiv = "Content-type" Content = "text/html; Vom Hintergrund an das Front-End übergeben. Es kann vom Thema Ajax getrennt werden, und es besteht nicht erforderlich, zu viel Aufmerksamkeit zu schenken-> <%list <map <String, Objekt >> listmap = (List <map <String, Objekt >>) request.getAttribute ("list"); %> <select id = "class" onchange = "getStudent (this.value)"> <option value = "-1"> Bitte wählen Sie Klasse </option> <%für (int i = 0; i <listMap.size (); i ++) {map <String, Object> map = listmap.get (i);%> <%=%=%=%=%=%= igm = igm = igm = igm = igm =%("class (" class ("class ("). %> </option> < %} %> <!-Wählen Sie zuerst die Klasse aus, und dann synchronisiert die Option für das zweite Menü die Daten der Hintergrunddatenbank asynchron gemäß dem ausgewählten Inhalt und setzt so die Optionen des zweiten Menüs-> </auswählen> <!-Zweites Menü auswählen. -> <script type = "text/javaScript" src = "jQuery/jQuery-3.1.1.min.js"> </script> <!-Verwenden Sie AJAX in jQuery, um eine asynchrone Synchronisation der Schnittstelle durchzuführen-> <Script> // Jquery Standard Syntax $ (Dokument). Kontrolländerungen, diese Funktion $ ("#class"). ändern (function () {// rufen Sie Ajax $ .ajax in jQuery ({// Setzen Sie die Einreichungsmethode fest, hauptsächlich "get" und "post" Typ: "p ost", // Setzen Sie die eingereichte URL, Sie können hier nur lokale ausgewählt. Wenn Sie Ressourcen von anderen Domänen anrufen müssen, bitte Google, um die Cross-Domain-Problem-URL zu lösen: "ajax.html? ClassName ="+$ ("#class"). Val (), // das Format der Hintergrundrendite festlegen, verwenden Sie JSON im Allgemeinen direkt. Dieser Satz kann nicht übersehen werden. Wenn der Hintergrund Daten zurückgibt, wird die Erfolgsmethode nicht als Datentyp bezeichnet: "JSON", // Wenn der Hintergrund Daten erfolgreich zurückgibt, wird die Methode aufgerufen. Der Datenparameter repräsentiert die von AJAX in JQuery formatierte JSON-Daten (tatsächlich müssen wir sie manuell in Nicht-Jquery-AJAX formatieren, und ich habe auch die reine JS-Methode in den Kommentaren geschrieben. Die Methode zur Formatierung von JSON-Daten in jQuery ist Parse). Option $ ("#name"). append ("<option> Bitte wählen Sie Name </option>"); // Schleifen Sie die gesamten Daten (JSON -Daten) und fügen Sie Option $ .ach (Daten, Funktion (i, n) {$ ("#name"). append (". <option> "+data [i] .name+" </option> ");});});});});});}); </script> <!-Die Einreichungsmethode verwendet nicht die jQuery-Bibliothek. Onchange zur Auswahlsteuerung, um diese Methode aufzurufen, und dann wird der ausgewählte Wert automatisch in dieser Klassenname-Variablenfunktion GetStudent (className) {if (className! = "-1") {// verwenden. die offene Methode. Das letzte True bedeutet, dass Sie eine asynchrone Einreichung verwenden, die weggelassen werden kann. Der Standardwert ist TrueRequest.open ("post", "ajax.html? ClassName ="+className, true); // AJAX -Anfrageanforderung (); // AJAX -Anfrage senden. function () {// beurteilen Sie, dass der nächste Schritt nur ausgeführt wird, wenn (request.readyState === 4) {// beurteilen, dass der Rückgaberocode der Webseite 200 beträgt, wenn in Ordnung ist, fahren Sie mit dem nächsten Schritt fort. document.getElementById ("Name"). Länge;Viertens das Endwirkungsdiagramm
Das obige ist die Javaweb -Entwicklung, die der Herausgeber Ihnen vorgestellt hat. Verwenden von JQuery und AJAX, um dynamische Verknüpfungsmenüeffekte zu erzielen. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!