Ajax+Servlet to implement refresh-free drop-down linkage (code attached)

This time I will bring you Ajax+Servlet (with code) to implement non-refresh drop-down linkage. What are the precautions? The following is a practical case. Let’s take a look.

The drop-down linkage function can be said to be very commonly used, such as when selecting province, city and other information; or when selecting major categories or subcategories. In short, drop-down linkage is very commonly used. Today I will share with you a simple two-level drop-down linkage function.

Major category drop-down box: When the page is loaded, the drop-down options of the major categories are initialized, and the data is obtained from the database through the background code (of course, constant content such as provinces and cities can be given values ​​directly), and then loaded into drop-down options.

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

Small category drop-down box: The small category drop-down option is to asynchronously submit the content of the selected major category to a Servlet through Ajax, then return the corresponding small category content, and finally load it into the small category drop-down option.

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

Obtain and load the JS code of the small category drop-down box:

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

I won’t go into details here on how to get data from the database. It’s just an ordinary query, which is relatively simple. Second-level linkage, third-level linkage, and multi-level linkage are all the same, that is, loading the contents of a drop-down box in advance, and then loading the subsequent drop-down box options based on the first selected content, and so on. Once you have mastered the second-level linkage, everything else becomes a matter of course, that is, just adding a few more drop-down boxes.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps to receive josn data using josnp in ajax

##How to use an elegant solution for front-end ajax requests accomplish

The above is the detailed content of Ajax+Servlet to implement refresh-free drop-down linkage (code attached). For more information, please follow other related articles on the PHP Chinese website!