Kaskadierung des Ajax-Dropdown-Menüs

Dieses Mal bringe ich Ihnen das Dropdown-Menü Kaskadenoperation von Ajax. Was sind die Vorsichtsmaßnahmen für die Kaskadenoperation des Ajax-Dropdown-Menüs? Werfen wir einen Blick darauf.

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.

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

①Verwenden Sie js zur Implementierung 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 Detail.

② 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 beinhaltet zwei Optionen, nämlich: Geräteklassifizierung und Geräteunterkategorie, wobei die Die Gerätekategorie ist das Menü der ersten Ebene und die Geräteunterkategorie ist das Sekundäre Menü. Der Anzeigeinhalt der Geräteunterkategorie wird durch die Gerätekategorie 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 ='<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);
      }
    });
  }

Es ist nicht schwer zu erkennen, dass, wenn sich der Inhalt in der Geräteklassifizierung Klassenauswahl ändert, die Funktion showCodeSubCate aktiviert wird wird ausgelöst, um anzufordern. Rufen Sie die Daten im Hintergrund ab und fügen Sie dann die angeforderten Daten der Auswahl hinzu, die der Geräteunterklasse entspricht. Die Implementierung des Hintergrundcodes ist wie folgt (es werden nur die Controller-Methoden 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 oben genannten Ajax-Anfragen. Es lohnt sich, die vom Hintergrund zurückgegebenen Daten einzuführen . Der Rückgabewerttyp ist Result< ;String>, der Rückgabewerttyp ist eine Toolklasse, die spezifische Implementierung kann in meinem Blog eingesehen werden, der Link ist: http://www.cnblogs.com/blog411032/p/5799669. html

ajax Tool-Klasse zur interaktiven Übertragung von Daten mit dem 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;
  }
}

Diese Klasse bietet großen Komfort für Front-End- und Back-End-Interaktionen:

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

Front-End-Ajax-Code:

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

Das Folgende ist der Back-End-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;
  }

I Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ajax+mysq realisiert eine dreistufige Verknüpfungsliste von Provinzen und Gemeinden

Ajax überträgt Json und XML-Daten Detaillierte Erklärung der Schritte (mit Code)

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