Fonctionnement en cascade du menu déroulant ajax-tutoriel php-php.cn

Fonctionnement en cascade du menu déroulant ajax

小云云

Libérer： 2023-03-19 13:18:02

original

1275 Les gens l'ont consulté

En développement, nous rencontrons souvent des opérations de menu en cascade, telles que : sélection de pays, de villes, de villages, etc. Lorsqu'un pays est sélectionné, le menu suivant répertorie les villes de ce pays. Lorsqu'une ville est sélectionnée, le menu suivant répertorie les villes correspondantes. Cet article présente principalement en détail le fonctionnement en cascade du menu déroulant et partage la classe d'outils pour la transmission interactive de données entre ajax et l'arrière-plan. Les amis intéressés peuvent s'y référer. J'espère que cela pourra vous aider.

Je comprends deux façons de résoudre le fonctionnement en cascade de ce menu :

①Utilisez js pour implémenter, mettez les données en cascade utilisées sur la page dans js, quand une fois la page chargée, il est affiché dans la sélection correspondante via js. Il existe de nombreuses solutions à cette méthode, la plus intuitive consiste à la placer dans un tableau multidimensionnel. Tout le monde a une pensée différente, je ne l'expliquerai donc pas en détail ici.

② Utilisez ajax pour charger de manière asynchrone et dynamique, puis affichez-le dans la sélection correspondante. Cette méthode est très pratique et est recommandée pour une utilisation en développement.

Regardons un petit exemple en développement :

Page courte JSP :

      <p class="form-group">
        <label class="col-sm-2 control-label">设备类别</label>
        <p class="col-sm-4">
          <select class="basic-single" name="codeCategory" onchange="showCodeSubCate()" id="codeCategory" style="width: 100%">
          
          </select>
        </p>
        <label class="col-sm-2 control-label">设备子类</label>
        <p class="col-sm-4">
          <select class="basic-single" name="codeSubCategory" id="codeSubCate" disabled="disabled" style="width: 100%">
            <option value="">--请选择--</option>
          </select>
        </p>
</p>

Copier après la connexion

Cette page comporte deux options : la classification des appareils et la sous-catégorie de l'appareil. La classification de l'appareil est le menu de premier niveau et la sous-catégorie de l'appareil est le menu de deuxième niveau. Le contenu d'affichage de la sous-catégorie de l'appareil est déterminé par la classification de l'appareil.

Regardons l'extrait de code ajax :

function addCodeCategory(){
    $.ajax({
      url: "<%=request.getContextPath()%>/facilitydict/showCodeCategory",
      async: false, //请求是否异步，默认为异步，这也是ajax重要特性
      type: "GET",  //请求方式
      success: function(result) {
        result = $.parseJSON(result);
        var data = result.data;
        var codeCates = data.split(",");
        str =&#39;<option value="6801">--请选择--</option>&#39;;
        for(x in codeCates){
          str+=&#39;<option value="&#39;+codeCates[x]+&#39;">&#39;+codeCates[x]+&#39;</option>&#39;;
        }
        $("#codeCategory").html(str);
        
      }
    });
  }
  
  function showCodeSubCate(){
    $("#codeSubCate").prop("disabled","");//将设备子类的select解除锁定
    var target = $("#codeCategory option:selected").text();
    $.ajax({
      url: "<%=request.getContextPath()%>/facilitydict/showCodeSubCategory",
      data : {codeCategory:target},
      async: false, //请求是否异步，默认为异步，这也是ajax重要特性
      type: "GET",  //请求方式
      success: function(result) {
        result = $.parseJSON(result);
        var data = result.data;
        var codeCates = data.split(",");
        var str="";
        for(x in codeCates){
          str+=&#39;<option value="&#39;+codeCates[x]+&#39;">&#39;+codeCates[x]+&#39;</option>&#39;;
        }
        $("#codeSubCate").html(str);
      }
    });
  }

Copier après la connexion

Il n'est pas difficile de voir que lorsque le le sélecteur de catégorie d'appareil est Après les modifications du contenu, déclenchez la fonction showCodeSubCate pour demander l'arrière-plan pour obtenir des données, puis ajoutez les données demandées à la sélection correspondant à la sous-classe d'appareil. L'implémentation du code de fond est la suivante (seules les méthodes du contrôleur sont publiées) :

@RequestMapping("/showCodeCategory")
  @ResponseBody
  public Result<String> searchCodeCategory() {

    Result<String> rs = new Result<>();
    List<String> codeCategorys = facilityDictService.searchCodeCategory();
    String codeCate = StringUtil.collectionToCommaDelimitedString(codeCategorys);
    rs.setData(codeCate);
    return rs;

  }

  @RequestMapping("/showCodeSubCategory")
  @ResponseBody
  public Result<String> searchCodeSubCategory(HttpServletRequest request) {
    String codeCategory = request.getParameter("codeCategory");
    Result<String> rs = new Result<>();
    List<String> codeSubCategorys = facilityDictService.searchCodeSubCategory(codeCategory);
    String codeCate = StringUtil.collectionToCommaDelimitedString(codeSubCategorys);
    rs.setData(codeCate);
    return rs;
  }

Copier après la connexion

Ces deux méthodes correspondent respectivement aux deux ajax ci-dessus. , cela vaut la peine d'introduire les données renvoyées par l'arrière-plan. Le type de valeur de retour est Result. L'implémentation spécifique peut être consultée sur mon blog. ://www.cnblogs.com /blog411032/p/5799669.html

Classe d'outils pour ajax pour interagir avec l'arrière-plan pour transmettre des données

 public class Result<T> implements Serializable {

  private static final long serialVersionUID = 3637122497350396679L;

  private boolean success;
  private T data;
  private String msg;

  public Result() {
  }

  public Result(boolean success) {
    this.success = success;
  }

  public boolean isSuccess() {
    return success;
  }

  public void setSuccess(boolean success) {
    this.success = success;
  }

  public T getData() {
    return data;
  }

  public void setData(T data) {
    this.data = data;
  }

  public String getMsg() {
    return msg;
  }

  public void setMsg(String msg) {
    this.msg = msg;
  }

  public Result(boolean success, String msg) {
    super();
    this.success = success;
    this.msg = msg;
  }

  public Result(boolean success, T data) {
    super();
    this.success = success;
    this.data = data;
  }

}

Copier après la connexion

Cette classe est une interaction front-end et back-end Offre une grande commodité :

Ce qui suit est l'interaction ajax entre le front-end et le backend :

Le code ajax frontal :

$.ajax({
      url: "<%=request.getContextPath()%>/supp/deleteSupp",
      data : {supplierId:supplierId},
      async: false, //请求是否异步，默认为异步，这也是ajax重要特性
      type: "GET",  //请求方式
      success: function(data) {
        var rs = eval(&#39;(&#39;+data+&#39;)&#39;);
        flag = rs.success;
        if(flag){
          alert("删除成功!");
        }
      }
    });

Copier après la connexion

Ce qui suit est le code java d'arrière-plan :

  @RequestMapping("/deleteSupp")
  @ResponseBody
  public Result<String> deleteSupplier(HttpServletRequest request){
    Result<String> rs = new Result<>();
    String supplierId = request.getParameter("supplierId");
    supplierService.deleteSupplierById(supplierId);
    rs.setSuccess(true);
    return rs;
  }

Copier après la connexion

Recommandations associées :

Tutoriel d'implémentation CSS pure du menu déroulant

Implémentation JQuery du partage de méthode de menu déroulant

Implémentation jQuery de l'effet accordéon du menu déroulant Partager

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!