JS uses XML data carrier to realize the secondary linkage effect of urban provinces

Examples of this article share specific code for the use of XML data carriers to realize the secondary linkage of urban provinces. For your reference, the specific content is as follows

First write the front page TestProVince.jsp, will request the Open, Send Send to Server

     "Rel =" External Nofollow ">  Secondary linkage  <base href="    Select {width: 111px;}      Select province       Select City    // Create a Jax Object Function Createajax () {VAR Ajax = null; try {ajax = new activXObject ("microsoft.xmlhttp");} catch (e) {Try {ajax = new xmlhttpRequest ();} catch (e1) {Alert ("Please replace browser");} } Return Ajax;}   Document.getElementByid ("provinceId"). Onchange = Function () {// Empty City In addition to the first var cityley = document.getlementByid ("cityid"); cityElem.Options.Length = 1; // Get selected province var province = this.Value; // Code processing province = encodeuri (province); if ("Select province"! = province) {var ajax = creteajax (); // Submit mode is get var method = "get"; / / Submit path to servlet path var line URL = "$ {pageContext.Request.contextPath} / provinceServlet? Time = "+ new date (). gettime () +" & provvice = "+ province; // Preparing to send asynchronous request Ajax.Open (Method, URL); // due to Get Request, so no need to set the request head // Send request Ajax.send (null); // Listen to the server response status Ajax.onReadyStateChange = function () {// Response status is 4 indicates that Ajax has fully acceired the server. IF (Ajax.ReadyState == 4) {// received data normal IF (ajax.status == 200) {// Get the HTML data from the server to the HTML data =Ajax.responsexml; // Perform a DOM operation analysis XML // parsing XML data var citys = xmldocument.getElementsBytagname ("city"); for (var i = 0; i        Then obtain the request through the GET mode in the background provinceclip, send the returned data to the O (output) stream, the Ajax.Responsexml of the above code is obtained, and the DOM operation is performed  < citys.length;i++){ 
        //获取xml中的值 :不能用innerHTML,要用nodeValue 
        var city = citys[i].firstChild.nodeValue; 
        //创建option 
        var optElement = document.createElement("option"); 
        optElement.innerHTML = city; 
        //获取city 
        var cityElems = document.getElementById("cityID"); 
        cityElems.appendChild(optElement); 
       } 
        
      } 
     } 
    } 
   } 
    
  } 
   
   
    
public class ProvinceServlet extends HttpServlet {@Override protected void doGet (HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding ( “utf-8”); Resp.setCharacterencoding (“UTF-8”); String Province = Req.getParameter (“province”); // Re-encode province = new string (“ISO-8859-1”), “UTF-8” ); // set the format to XML Resp.setContentType (“text / xml; charset = UTF-8”); // Get character output stream PrintWriter PW = Resp.geTWRITER (); // Spliced ​​XML head PW.WRITE (“
“); PW.WRITE (“

“); if (“Hunan” .Equals (province)) {PW.write (“
Changsha

“); PW.WRITE (”
“); PW.WRITE (” Xiangtan
 "); PW.WRITE ("  Yueyang  ");} else if (" Guangdong ".Equals (province)) {PW.Write ("  Guangzhou  "); PW.WRITE ("  Shenzhen  "); PW.WRITE (" Zhongshan ");} PW.WRITE (""); pw.flush (); pw.close ();}}      The results are as follows:     The above is all the contents of this article, I hope that everyone's learning is helpful, I hope that everyone will support Tumi Clouds.  
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment