Ajax 드롭다운 메뉴의 계단식 작업

개발 중에 국가, 도시, 마을 선택 등과 같은 메뉴 계단식 작업을 자주 접하게 됩니다. 국가를 선택하면 다음 메뉴에 해당 국가의 도시가 나열됩니다. 도시를 선택하면 해당 도시가 나열됩니다. 이 글은 주로 드롭다운 메뉴의 캐스케이드 동작을 자세히 소개하고, Ajax와 백그라운드 간의 대화형 데이터 전송을 위한 도구 클래스를 공유하므로 관심 있는 친구들이 참고하면 도움이 될 것입니다.

이 메뉴의 계단식 동작을 해결하는 방법은 두 가지가 있습니다.

①js를 사용하여 구현하고, 페이지에서 사용되는 계단식 데이터를 js에 넣고, 페이지가 로드되면 js를 통해 표시합니다. 해당 선택 항목에서 , 이 방법에는 여러 가지 해결 방법이 있습니다. 가장 직관적인 방법은 다차원 배열에 넣는 것입니다. 사람마다 생각이 다르기 때문에 여기서는 자세히 설명하지 않겠습니다.

②ajax를 사용하여 비동기적이고 동적으로 로드한 다음 해당 선택 항목에 표시하는 방법은 매우 편리하며 개발에 사용하는 것이 좋습니다.

개발 중인 작은 예를 살펴보겠습니다.

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>

이 페이지에는 장치 분류와 장치 하위 클래스라는 두 가지 옵션이 포함되어 있으며, 그 중 장치 분류는 하나의 레벨 메뉴입니다. 장치 하위 범주는 보조 메뉴이며, 장치 하위 범주의 표시 내용은 장치 분류에 따라 결정됩니다.

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

기기 카테고리 선택기의 콘텐츠가 변경되면 showCodeSubCate 함수가 트리거되어 데이터를 얻기 위해 배경을 요청하는 것을 보는 것은 어렵지 않습니다. , 요청된 데이터가 추가됩니다. 장치 하위 클래스에 해당하는 선택으로 이동합니다. 백그라운드 코드의 구현은 다음과 같습니다(컨트롤러 메소드만 게시됨):

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

이 두 메소드는 각각 위의 두 ajax 요청에 해당합니다. 소개할 가치가 있는 것은 백그라운드에서 반환되는 데이터입니다. 반환 값 유형은 Result이고, 반환 값 유형은 도구 클래스이며, 구체적인 구현은 내 블로그에서 볼 수 있습니다. 링크는 http://www.cnblogs.com/blog411032/p/5799669.html입니다.

ajax는 백그라운드와 상호 작용하여 데이터를 전송합니다. 도구 클래스

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

}

이 클래스는 프런트 엔드 및 백엔드 상호 작용에 큰 편의를 제공합니다.

다음은 프런트 엔드 및 백엔드 상호 작용의 Ajax 상호 작용입니다. 백엔드:

프론트엔드 ajax 코드:

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

아래 배경 자바 코드:

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

Pure CSS 드롭 구현 -다운 메뉴 메소드 튜토리얼

jQuery 드롭다운 메뉴 메소드 공유 구현

jQuery 드롭다운 메뉴 아코디언 효과 공유 구현

위 내용은 Ajax 드롭다운 메뉴의 계단식 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!