집 > 기사 > 웹 프론트엔드 > 새로 고침이 필요 없는 드롭다운 연결을 구현하는 Ajax+Servlet(코드 첨부)

새로 고침이 필요 없는 드롭다운 연결을 구현하는 Ajax+Servlet(코드 첨부)

php中世界最好的语言원래의: 2018-03-30 16:57:171596검색

이번에는 새로 고침되지 않는 드롭다운 연결을 구현하기 위한 Ajax+Servlet(코드 포함)을 소개하겠습니다. 새로 고치지 않는 드롭다운 연결을 구현하기 위한 Ajax+Servlet 구현에 대한 주의 사항은 무엇입니까? 살펴보자.

드롭다운 연결 기능은 시/도 및 기타 정보를 선택할 때나 주요 카테고리나 하위 카테고리를 선택할 때 등 매우 일반적으로 사용된다고 할 수 있습니다. 즉, 드롭다운 연결이 매우 일반적으로 사용됩니다. 오늘은 간단한 2레벨 드롭다운 연결 기능을 알려드리겠습니다.

주요 카테고리 드롭다운 상자: 페이지가 로드되면 주요 카테고리의 드롭다운 옵션이 초기화되며 배경 코드를 통해 데이터베이스에서 데이터를 가져옵니다(물론 지방, 도시와 같은 지속적인 콘텐츠). 직접 값을 지정할 수 있음) 드롭다운 옵션에 로드됩니다.

<select name="region" class="select1" id="BigClass" onchange="selectProv(this)"> 
  <option value="0">--全部--</option> 
  <% 
    Map map = ClientManager.getInstance().getRegionList(); 
    for (Iterator iter=map.entrySet().iterator(); iter.hasNext();) { 
      Map.Entry entry = (Map.Entry)iter.next();                     
  %> 
      <option value="<%=entry.getKey() %>"><%=entry.getValue() %></option> 
  <% 
    } 
  %>   
</select>

소형 카테고리 드롭다운 상자: 소형 카테고리의 드롭다운 옵션은 선택한 주요 카테고리의 콘텐츠를 Ajax를 통해 비동기적으로 서블릿에 제출한 다음 해당 소형 카테고리 콘텐츠를 반환하고 마지막으로 작은 카테고리 드롭다운 옵션입니다.

<select name="province" class="select1" id="SmallClass"> 
  <option value="0">--全部--</option> 
</select>

작은 카테고리 드롭다운 상자의 JS 코드 가져오기 및 로드:

<script type="text/javascript"> 
  function selectProv(field) { 
    var xmlHttp = null; 
    //表示当前浏览器不是ie,如ns,firefox 
    if(window.XMLHttpRequest) { 
      xmlHttp = new XMLHttpRequest(); 
    } else if(window.ActiveXObject) { 
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
      var url = "${pageContext.request.contextPath}/servlet/SelectProvServlet?regionId=" + trim(field.value) + "&time=" + new Date().getTime(); 
     
    //设置请求方式为GET，设置请求的URL，设置为异步提交 
    xmlHttp.open("GET", url, true); 
     
    xmlHttp.onreadystatechange=function() { 
      //Ajax引擎状态为成功 
      if(xmlHttp.readyState == 4) { 
        //HTTP协议状态为成功 
        if(xmlHttp.status == 200) { 
          var doc = xmlHttp.responseXML; 
          var items = doc.getElementsByTagName("item"); 
          //取得小类下拉列表 
          var provSelect = document.getElementById("SmallClass"); 
          //清除小类下拉列表中的值 
          provSelect.options.length = 0; 
          var o = new Option("--全部--", 0); 
          provSelect.add(o); 
          for (var i=0; i<items.length; i++) { 
            var id =items[i].childNodes[0].firstChild.nodeValue; 
            var name = items[i].childNodes[1].firstChild.nodeValue; 
            var o = new Option(name, id); 
            provSelect.add(o); 
          } 
        }else { 
          alert("请求失败，错误码=" + xmlHttp.status); 
        } 
      } 
    }; 
     
    //将设置信息发送到Ajax引擎 
    xmlHttp.send(null); 
  } 
</script>

데이터베이스에서 데이터를 가져오는 구체적인 방법은 여기서 설명하지 않습니다. 이는 비교적 간단한 일반적인 쿼리입니다. 2단계 연결, 3단계 연결, 다단계 연결은 모두 동일합니다. 즉, 드롭다운 상자의 내용을 미리 로드한 다음 첫 번째 선택한 항목을 기준으로 후속 드롭다운 상자 옵션을 로드합니다. 내용 등이 있습니다. 두 번째 수준 연결을 마스터하고 나면 다른 모든 것은 당연한 문제가 됩니다. 즉, 드롭다운 상자를 몇 개 더 추가하기만 하면 됩니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!