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

장치 클래스 선택기의 콘텐츠가 변경되면 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<입니다. ;String> 값 유형은 도구 클래스입니다. 링크는 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('('+data+')');
        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;
  }

이 글의 사례를 읽으신 후 마스터하셨을 거라 믿습니다. 더 흥미로운 방법을 알고 싶다면 PHP 중국어 웹사이트의 다른 관련 글을 주목해 보세요!

추천 자료:

Ajax+mysq는 지방자치단체의 3단계 연결 목록을 구현합니다.

Json 및 xml 데이터의 Ajax 전송 단계에 대한 자세한 설명(코드 포함)

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