Kaskadierende Bedienung des Ajax-Dropdown-Menüs

In der Entwicklung stoßen wir häufig auf kaskadierende Menüoperationen, wie zum Beispiel: Auswahl von Ländern, Städten, Gemeinden usw. Wenn ein Land ausgewählt ist, werden im folgenden Menü die Städte in diesem Land aufgelistet. Wenn eine Stadt ausgewählt ist, werden im folgenden Menü die entsprechenden Städte aufgelistet. In diesem Artikel wird hauptsächlich die Kaskadenoperation des Dropdown-Menüs ausführlich vorgestellt und die Toolklasse für die interaktive Übertragung von Daten zwischen Ajax und dem Hintergrund vorgestellt. Ich hoffe, dass er Ihnen helfen kann.

Ich verstehe zwei Möglichkeiten, die Kaskadenoperation dieses Menüs zu lösen:

①Verwenden Sie js zum Implementieren und fügen Sie die auf der Seite verwendeten Kaskadendaten in js ein. Wenn die Seite geladen ist, Es wird in der entsprechenden Auswahl über js angezeigt. Die intuitivste Lösung besteht darin, sie in ein mehrdimensionales Array einzufügen. Daher werde ich sie hier nicht näher erläutern.

② Verwenden Sie Ajax zum asynchronen und dynamischen Laden und zeigen Sie es dann in der entsprechenden Auswahl an. Diese Methode ist sehr praktisch und wird für die Verwendung in der Entwicklung empfohlen.

Sehen wir uns ein kleines Beispiel in der Entwicklung an:

JSP-Kurzseite:

      <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>

Diese Seite umfasst zwei Optionen: Geräteklassifizierung und Geräteunterkategorie. Die Geräteklassifizierung ist das Menü der ersten Ebene und die Geräteunterkategorie ist das Menü der zweiten Ebene. Der Anzeigeinhalt der Geräteunterkategorie wird durch die Geräteklassifizierung bestimmt.

Schauen wir uns das Ajax-Code-Snippet an:

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);
      }
    });
  }

Es ist nicht schwer, das zu erkennen, wenn das Die Auswahl der Gerätekategorie ist: Lösen Sie nach der Inhaltsänderung die Funktion showCodeSubCate aus, um den Hintergrund anzufordern, um Daten abzurufen, und fügen Sie dann die angeforderten Daten der Auswahl hinzu, die der Geräteunterklasse entspricht. Die Implementierung des Hintergrundcodes ist wie folgt (nur die Controller-Methoden werden veröffentlicht):

@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;
  }

Diese beiden Methoden entsprechen jeweils den beiden Bei Ajax-Anfragen lohnt es sich, den vom Hintergrund zurückgegebenen Datentyp vorzustellen. Der Rückgabewerttyp ist eine Tool-Klasse. Der Link lautet: ://www.cnblogs.com /blog411032/p/5799669.html

Tool-Klasse für Ajax zur Interaktion mit dem Hintergrund, um Daten zu übertragen

 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;
  }

}

Diese Klasse ist eine Front-End- und Back-End-Interaktion. Bietet großen Komfort:

Das Folgende ist die Ajax-Interaktion zwischen Front- und Backend:

Der Front-End-Ajax-Code:

$.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("删除成功!");
        }
      }
    });

Das Folgende ist der Hintergrund-Java-Code:

  @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;
  }

Verwandte Empfehlungen:

Tutorial zur reinen CSS-Implementierung der Dropdown-Menümethode

JQuery-Implementierung der Dropdown-Menü-Methodenfreigabe

jQuery-Implementierung des Akkordeoneffekts der Dropdown-Menü-Methodenfreigabe

Das obige ist der detaillierte Inhalt vonKaskadierende Bedienung des Ajax-Dropdown-Menüs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!