Javascript Girl
  1. Javascript Girl
  3. Ajax + servlet pays état liste ville
Intereting Posts
Javascript: calculer x% d'un nombre Accès aux classes CSS dans un fichier css, cross-domain, en javascript Meilleur moyen de générer un tableau 2D vide Existe-t-il une manière correcte / recommandée de détecter mon application UWP Je cours sur un téléphone? Détecter une récurrence infinie? Soumette la boîte de dialogue jQuery UI sur <Entrée> Bootstrap 3 – modal ouvert d'un autre modal Détection si un navigateur utilise le mode de navigation privée Générateur de nombres aléatoires unique Javascript Quelle différence existe-t-il dans JavaScript entre une fonction de constructeur et l'objet de retour de fonction qui est invoqué en tant que constructeur? Solution géospatiale de Sailsjs avec ligne de flottaison Utilisez Javascript pour accéder à une variable passée par Twig Stockage du tableau d'octets dans la base de données sqlite HTML5 Navigation d'ancrage Javascript Envoyer un tableau via la requête GET avec le service $ http de AngularJS

Ajax + servlet pays état liste ville

J'essaie de peupler la ville, le pays et le stateliste en utilisant ajax et les servlets. Maintenant, je sais comment obtenir l'objet XMLhttpRequest. Il existe un mécanisme standard pour cela et en fonction de la compatibilité du navigateur croisé, vous obtenez un ActiveX ou un objet xml. Ensuite, vous envoyez une requête à la carte d'actions, en utilisant xmlhttprequest.open () et vous envoyez la demande et vous avez Une fonction de gestionnaire d'événements pour prendre en charge le problème de l'émission sur le rayon, maintenant, quand il s'agit de recevoir la réponse, j'ai une erreur indiquant que la réponse n'est pas complètement reçue, c'est-à-dire le statut! = 4 … maintenant. Je me demandais comment fonctionne l'ensemble du mécanisme … comment mettre les paramètres dans la demande, l'envoyer à la servlet … puis je sais comment retirer le paramètre de l'URL … mais ensuite comment envoyer une réponse valide. .. ??

Je suis confus sur la partie ajax … Parce que je n'utilise pas / ne pas utiliser PHP … il est plus difficile de penser … suggère ce qu'il faut faire …

Existe-t-il un moyen plus simple de peupler une liste de villes, pays et états?

Permettez simplement à la servlet de retourner les options déroulantes souhaitées dans le format souhaité en fonction des paramètres de la demande dans la méthode doGet() . Voici un exemple qui le renvoie au format JSON avec l'aide de Google Gson : 

 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String type = request.getParameter("type"); // Returns "country" or "state". String value = request.getParameter("value"); // Value of selected country or state. Map<String, String> options = optionDAO.find(type, id); // Do your thing to obtain them from DB. Map key is option value and map value is option label. String json = new Gson().toJson(options); // Convert Java object to JSON string. response.setContentType("application/json"); // Inform client that you're returning JSON. response.setCharacterEncoding("UTF-8"); // Important if you want world domination. response.getWriter().write(json); // Write JSON string to response. }

En supposant que la servlet ci-dessus est mappée sur un url-pattern de /options , vous pouvez l'utiliser comme dans l'exemple JSP suivant avec l'aide de jQuery . Je recommande jQuery parce que vous obtiendriez autrement 10 fois le code JavaScript nécessaire pour cette tâche "simple". 

 <%@ page pageEncoding="UTF-8" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html> <html lang="en"> <head> <title>SO question 3983929</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function() { $('#country').change(function() { fillOptions('state'); }); $('#state').change(function() { fillOptions('city'); }); }); function fillOptions(dropdownId) { var dropdown = $('#' + dropdownId); $.getJSON('options?type=' + dropdownId + '&value=' + $(this).val(), function(opts) { $('>option', dropdown).remove(); // Clean old options first. if (opts) { $.each(opts, function(key, value) { dropdown.append($('<option/>').val(key).text(value)); }); } else { dropdown.append($('<option/>').text('Please select ' + dropdownId)); } }); } </script> </head> <body> <form> <select id="country" name="country"> <c:forEach items="${countries}" var="country"> <option value="${country.key}" ${param.country == option.key ? 'selected' : ''}>${country.value}</option> </c:forEach> </select> <select id="state" name="state"> <option>Please select country</option> </select> <select id="city" name="city"> <option>Please select state</option> </select> </form> </body> </html>

Ici, je suppose que vous avez déjà prépopulé ${countries} comme une Map<String, String> dans une servlet qui a prétraité la requête vers cette JSP pour l'affichage initial.