Comme je l'ai déjà écrit, lorsque j'ai terminé cette démo, j'ai trouvé que maintenant tout le monde n'utilise plus Ajax pour terminer le menu conjoint. En fait, la démo de l'auteur n'est pas pour terminer cela. La principale orientation d'apprentissage de l'auteur est le développement de la logique commerciale de l'arrière-plan Javaweb. Cependant, lorsque vous travaillez en arrière-plan, vous devez toujours comprendre le frontal, en particulier la technologie de la soumission de données asynchrones telle que l'Ajax doit être comprise et maîtrisée. Ici, j'utilise ici un menu concaténé pour pratiquer la soumission asynchrone de l'Ajax, puis j'écrirai plusieurs démos du formulaire de soumission asynchrone.
L'arrière-plan de l'auteur utilise le cadre Spring + SpringMVC. Cette partie n'est pas expliquée ici, l'accent est mis sur JQuery et Ajax.
Tout d'abord, téléchargez la ressource jquery.js
Lien de site Web officiel de jQuery
Deuxièmement, importez le jQuery.js téléchargé dans le projet
Dans un projet Javaweb, il suffit de le mettre dans WebContent (vous pouvez également créer votre propre dossier, mais ne le mettez pas dans le fichier Web-inff)
Troisièmement, commencez à écrire du code
Créer un nouveau fichier JSP
Le code est le suivant
<% @ page import = "java.util.map"%> <% @ page import = "java.util.list"%> <% @ page linguisse = "java" contentType = "text / html; charset = utf-8" pageencoding = "utf-8"%> <! doctype html public "- // w3c // dtd html 4.01 public" - // w3c // dtd html 4.01 public "- // w3c // dtd html 4.01 public" - // w3c // dtd html 4.01 public "- // w3c // dtd html 4.01 Transitional // en "" http://www.w3.org/tr/html4/loose.dtd"><html><head><meta http-equiv = "contenu-type" contenu = "text / html; passé au front-end à l'arrière-plan. Il peut être séparé du sujet ajax, et il n'est pas nécessaire de prêter trop d'attention -> <% list <map <string, object >> listmap = (list <map <string, objet >>) request.getAttribute ("list"); %> <select id = "class" onchange = "getStudent (this.value)"> <option value = "- 1"> Veuillez sélectionner la classe </opoption> <% pour (int i = 0; i <listmap.size (); i ++) {map <string, object> map = listmap.get (i);%> <option> <% = map.get ("classique"). %> </ option> <%}%> <! - Sélectionnez d'abord la classe, puis l'option de menu synchronise les données de la base de données d'arrière-plan de manière asynchrone en fonction du contenu sélectionné, définissant ainsi les options du deuxième menu -> </lect> <! - Deuxième menu, déterminez le nom en fonction de la classe sélectionnée -> <Select Id = "Name"> <option> Sélectionnez First </option> </lect> </ Body> type = "text / javascript" src = "jQuery / jQuery-3.1.1.min.js"> </cript> <! - Utilisez ajax dans jQuery pour effectuer une synchronisation asynchrone (document). Fonction $ ("# class"). Change (function () {// Appelez AJax $ .ajax dans jQuery ({// Définissez la méthode de soumission, principalement "Get" et "Post" Type: "P OST", // Définir l'URL soumise, vous ne pouvez que sélectionner les locaux ici. Si vous avez besoin d'appeler les ressources à partir d'autres domaines, veuillez résoudre l'URL du problème du domaine croisé: "ajax.html? Classname =" + $ ("# class"). Val (), // définir le format du retour d'arrière-plan, utilisez généralement directement JSON. Cette phrase ne peut pas être manquée. Sinon, lorsque l'arrière-plan renvoie les données, la méthode de réussite ne sera pas appelée DataType: "JSON", // Lorsque l'arrière-plan renvoie avec succès les données, la méthode est appelée. Le paramètre de données représente les données JSON formatées par Ajax dans jQuery (en fait, nous devons les formater manuellement dans la méthode JSON non JQUERY, et j'ai également écrit la méthode pure JS dans les commentaires. La méthode de la mise en forme des données JSON dans JQuery est parse) Success: Function (Data) {// Effacer le contrôle de l'identifiant avec $ ("# name"). Option $ ("# name"). APPEND ("<opoption> Veuillez sélectionner le nom </option>"); // Loop via les données entières (données JSON), et ajoutez l'option $ .each (données, fonction (i, n) {$ ("# name"). <option> "+ data [i] .name +" </ option> ");});});});});});}); </cript> <! - La méthode de soumission n'utilise pas la bibliothèque jQuery (ceci est utilisé par pur js, il est rarement utilisé, mais il peut être utilisé pour comprendre Ajax) <! Une onchange vers le contrôle de sélection pour appeler cette méthode, puis la valeur sélectionnée sera automatiquement stockée dans cette fonction de variable de nom de classe getStudent (className) {if (className! = "- 1") {// Utiliser xmlhttprequest Méthode, cette méthode est réellement utilisée dans le jQuery ci-dessus, mais nous avons déjà encapsulé le var demande = New XmlHT la méthode ouverte. Le dernier vrai signifie que vous utilisez une soumission asynchrone, qui peut être omise. La valeur par défaut est truerequest.open ("post", "ajax.html? ClassName =" + className, true); // Envoyer la demande de demande Ajax.Send (); // Envoyer une demande de demande Ajax.Send (); // Le statut de la demande est principalement 0 1 2 3 4, mais d'un côté, il n'écoutera que le 3 4, function () {// juger que l'étape suivante ne sera effectuée que si (request.readystate === 4) {// juger que le code de retour de la page Web est 200 quand ok, passez à l'étape suivante if (request.status === 200) {// Format la données JSON RETOUR document.getElementById ("name"). Length; i ++) {document.getElementById ("name"). retire (document.getElementById ("name").Quatrièmement, le diagramme d'effet final
Ce qui précède est le développement de Javaweb que l'éditeur vous a présenté. Utilisation de jQuery et Ajax pour réaliser des effets de menu de liaison dynamique. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!