Ajax+Servlet pour implémenter un lien déroulant sans actualisation (code ci-joint)

Cette fois, je vais vous proposer Ajax+Servlet (avec code) pour obtenir un lien déroulant sans actualiser. Quelles sont les précautions pour implémenter Ajax+Servlet pour obtenir un lien déroulant sans actualiser. Voici un cas pratique. Jetons un coup d’œil.

On peut dire que la fonction de liaison déroulante est très couramment utilisée, par exemple lors de la sélection d'une province, d'une ville et d'autres informations ou lors de la sélection de catégories ou sous-catégories principales ; En bref, les liens déroulants sont très couramment utilisés. Aujourd'hui, je vais partager avec vous une simple fonction de liaison déroulante à deux niveaux.

Boîte déroulante des catégories principales : lorsque la page est chargée, les options déroulantes des catégories principales sont initialisées et les données sont obtenues à partir de la base de données via le code d'arrière-plan (bien sûr, un contenu constant tel car les provinces et les villes peuvent recevoir des valeurs directement), puis chargées dans les options déroulantes.

<select name="region" class="select1" id="BigClass" onchange="selectProv(this)"> 
  <option value="0">--全部--</option> 
  <% 
    Map map = ClientManager.getInstance().getRegionList(); 
    for (Iterator iter=map.entrySet().iterator(); iter.hasNext();) { 
      Map.Entry entry = (Map.Entry)iter.next();                     
  %> 
      <option value="<%=entry.getKey() %>"><%=entry.getValue() %></option> 
  <% 
    } 
  %>   
</select>

Boîte déroulante Petite catégorie : L'option déroulante de la petite catégorie consiste à soumettre de manière asynchrone le contenu de la catégorie principale sélectionnée à un servlet via Ajax, puis à renvoyer le contenu de la petite catégorie correspondante, et enfin chargez-le dans la petite option déroulante de catégorie au milieu.

<select name="province" class="select1" id="SmallClass"> 
  <option value="0">--全部--</option> 
</select>

Récupérez et chargez le code JS de la petite liste déroulante de catégorie :

<script type="text/javascript"> 
  function selectProv(field) { 
    var xmlHttp = null; 
    //表示当前浏览器不是ie,如ns,firefox 
    if(window.XMLHttpRequest) { 
      xmlHttp = new XMLHttpRequest(); 
    } else if(window.ActiveXObject) { 
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
      var url = "${pageContext.request.contextPath}/servlet/SelectProvServlet?regionId=" + trim(field.value) + "&time=" + new Date().getTime(); 
     
    //设置请求方式为GET，设置请求的URL，设置为异步提交 
    xmlHttp.open("GET", url, true); 
     
    xmlHttp.onreadystatechange=function() { 
      //Ajax引擎状态为成功 
      if(xmlHttp.readyState == 4) { 
        //HTTP协议状态为成功 
        if(xmlHttp.status == 200) { 
          var doc = xmlHttp.responseXML; 
          var items = doc.getElementsByTagName("item"); 
          //取得小类下拉列表 
          var provSelect = document.getElementById("SmallClass"); 
          //清除小类下拉列表中的值 
          provSelect.options.length = 0; 
          var o = new Option("--全部--", 0); 
          provSelect.add(o); 
          for (var i=0; i<items.length; i++) { 
            var id =items[i].childNodes[0].firstChild.nodeValue; 
            var name = items[i].childNodes[1].firstChild.nodeValue; 
            var o = new Option(name, id); 
            provSelect.add(o); 
          } 
        }else { 
          alert("请求失败，错误码=" + xmlHttp.status); 
        } 
      } 
    }; 
     
    //将设置信息发送到Ajax引擎 
    xmlHttp.send(null); 
  } 
</script>

Je n'entrerai pas ici dans les détails sur la façon d'obtenir des données de la base de données. C'est juste une requête ordinaire, qui est relativement simple. Les liens de deuxième niveau, les liens de troisième niveau et les liens à plusieurs niveaux sont tous identiques, c'est-à-dire qu'il faut charger le contenu d'une liste déroulante à l'avance, puis charger les options de la liste déroulante suivantes en fonction de la première option sélectionnée. contenu, etc. Une fois que vous maîtrisez le lien de deuxième niveau, tout le reste devient une évidence, c'est-à-dire qu'il suffit d'ajouter quelques listes déroulantes supplémentaires.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour recevoir des données josn à l'aide de josnp en ajax

Qu'est-ce qu'un élégant solution pour requête ajax front-end Réaliser

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!