Opération en cascade du menu déroulant Ajax-js tutoriel-php.cn

Opération en cascade du menu déroulant Ajax

php中世界最好的语言

Libérer： 2018-04-03 15:21:42

original

1846 Les gens l'ont consulté

Cette fois, je vais vous présenter le menu déroulant fonctionnement en cascade d'ajax Quelles sont les précautions pour le fonctionnement en cascade d'ajax Voici les pratiques ? cas. Jetons un coup d'oeil.

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.

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 est de le mettre dans un tableau multidimensionnel Ici, je ne l'expliquerai pas. détail.

② 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 cours de 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 implique deux options, à savoir : la classification des appareils et la sous-catégorie de l'appareil, où le La catégorie d'appareil est le menu de premier niveau et la sous-catégorie d'appareil est le menu secondaire. Le contenu d'affichage de la sous-catégorie d'appareil est déterminé par la catégorie d'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 ='<option value="6801">--请选择--</option>';
        for(x in codeCates){
          str+='<option value="&#39;+codeCates[x]+&#39;">'+codeCates[x]+'</option>';
        }
        $("#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+='<option value="&#39;+codeCates[x]+&#39;">'+codeCates[x]+'</option>';
        }
        $("#codeSubCate").html(str);
      }
    });
  }

Copier après la connexion

Il n'est pas difficile de voir que lorsque le contenu de la classification de l'appareil sélecteur de classe change, la fonction showCodeSubCate est déclenché pour demander d'obtenir les données en arrière-plan, puis d'ajouter les données demandées à la sélection correspondant à la sous-classe de périphérique. 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 requêtes ajax ci-dessus. Ce qui mérite d'être présenté, ce sont les données renvoyées par le fond. . Le type de valeur de retour est Result< ;String>, le type de valeur de retour est une classe d'outils, l'implémentation spécifique peut être consultée sur mon blog, le lien est : http://www.cnblogs.com/blog411032/p/5799669. html

Classe d'outils ajax pour la transmission interactive de données avec le backend

 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 offre une grande commodité pour les interactions front-end et back-end :

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

Code ajax du front-end :

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

Copier après la connexion

Ce qui suit est le code java du back-end :

  @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

I Je crois que vous maîtrisez la méthode après avoir lu le cas présenté 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 :

Ajax+mysq réalise une liste de liaison à trois niveaux de provinces et de municipalités

Ajax transmet Json et données xml Explication détaillée des étapes (avec code)

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!