AJAX與JSON結合實現省市下拉框聯動

時間 2021-08-15

標籤 javascript html java web ajax json 瀏覽器服務器 app jsp 欄目 Ajax 简体版

原文原文鏈接

1.jsp註冊頁面：register.jspjavascript

  
  
           
  
  
   
   
            
   
   <%@page pageEncoding="GBK" contentType="text/html; charset=GBK" %> 
   
   
            
   
   <html> 
   
   
            
   
   <head> 
   
   
            
   
   <meta http-equiv="Content-Type" content="text/html; charset=GBK"/> 
   
   
            
   
   <title>註冊頁面</title> 
   
   
            
   
   <script type="text/javascript"> 
   
   
            
   
   //通用寫法，意在獲取不一樣瀏覽器的AJAX請求對象　　  
   
   
            
   
   function createXmlHttpRequest(){　　  
   
   
            
   
       var xmlHttp; 　　  
   
   
            
   
       try{　                 
   
   
            
   
           // Firefox, Opera 8.0+, Safari   
   
   
            
   
           xmlHttp=new XMLHttpRequest(); 　　  
   
   
            
   
       }　　  
   
   
            
   
       catch (e){　　  
   
   
            
   
           // Internet Explorer 　　  
   
   
            
   
           try {  
   
   
            
   
               xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 　  
   
   
            
   
           }　　  
   
   
            
   
           catch (e){　　  
   
   
            
   
               try {　　  
   
   
            
   
                   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 　  
   
   
            
   
               }　  
   
   
            
   
               catch (e){　　  
   
   
            
   
                   alert("您的瀏覽器不支持AJAX！"); 　  
   
   
            
   
                   return false; 　  
   
   
            
   
               }　  
   
   
            
   
           }　  
   
   
            
   
       }   
   
   
            
   
       return xmlHttp;  
   
   
            
   
   }  
   
   
            
   
    
   
   
            
   
   //省下拉框初始化          
   
   
            
   
   function selSheng(){     
   
   
            
   
       var request = createXmlHttpRequest();//建立request對象   
   
   
            
   
       var json;  
   
   
            
   
       request.open("post","nation.do?method=getSheng",true);//創建到服務器的新請求   
   
   
            
   
       request.send();//向服務器發送請求   
   
   
            
   
       request.onreadystatechange=function()//指定當readyState屬性改變時的事件處理句柄   
   
   
            
   
       {  
   
   
            
   
           if (request.readyState==4)//提取當前HTTP的就緒狀態,狀態4表示：響應已完成，能夠訪問服務器響應並使用它   
   
   
            
   
           if (request.status==200)//HTTP狀態,咱們指望的狀態碼是 200，它表示一切順利。   
   
   
            
   
           //若是就緒狀態是 4 並且狀態碼是 200，就能夠處理服務器的數據了，並且這些數據應該就是要求的數據   
   
   
            
   
           {  
   
   
            
   
               json = eval("("+request.responseText+")");//服務器返回響應文本 並解析  
   
   
            
   
               var ooption;  
   
   
            
   
               var sel = document.getElementById("sheng");  
   
   
            
   
               for(var i=0,n=json.nation.length;i<n;i++)  
   
   
            
   
               {  
   
   
            
   
                   ooption = document.createElement('option');  
   
   
            
   
                   ooption.value=json.nation[i].DM;  
   
   
            
   
                   ooption.innerHTML=json.nation[i].MC;    
   
   
            
   
                   sel.appendChild(ooption);   
   
   
            
   
               }  
   
   
            
   
           }   
   
   
            
   
       }             
   
   
            
   
   }　  
   
   
            
   
    
   
   
            
   
   //市下拉框初始化 
   
   
            
   
   function selShi(){     
   
   
            
   
       var request = createXmlHttpRequest();//建立request 對象   
   
   
            
   
       var json;  
   
   
            
   
       var sheng = document.getElementById("sheng").value;  
   
   
            
   
       request.open("post","nation.do?method=getShi&sheng="+sheng,true);//創建到服務器的新請求   
   
   
            
   
       request.send();//向服務器發送請求   
   
   
            
   
       request.onreadystatechange=function()//指定當readyState屬性改變時的事件處理句柄   
   
   
            
   
       {  
   
   
            
   
           if (request.readyState==4)//提取當前HTTP的就緒狀態,狀態4表示：響應已完成，能夠訪問服務器響應並使用它   
   
   
            
   
           if (request.status==200)//HTTP狀態,咱們指望的狀態碼是 200，它表示一切順利。   
   
   
            
   
           //若是就緒狀態是 4 並且狀態碼是 200，就能夠處理服務器的數據了，並且這些數據應該就是要求的數據   
   
   
            
   
           {  
   
   
            
   
               json = eval("("+request.responseText+")");//服務器返回響應文本 並解析  
   
   
            
   
               var ooption;  
   
   
            
   
               var sel = document.getElementById("shi");  
   
   
            
   
               sel.length=1;  
   
   
            
   
               for(var i=0,n=json.nation.length;i<n;i++)  
   
   
            
   
               {  
   
   
            
   
                   ooption = document.createElement('option');  
   
   
            
   
                   ooption.value=json.nation[i].DM;  
   
   
            
   
                   ooption.innerHTML=json.nation[i].MC;    
   
   
            
   
                   sel.appendChild(ooption);   
   
   
            
   
               }  
   
   
            
   
           }   
   
   
            
   
       }   
   
   
            
   
   }　　  
   
   
            
   
   </script> 　　  
   
   
            
   
   </head> 
   
   
            
   
   <body> 
   
   
            
   
   <form action="RegisterServlet.servlet" method="POST"> 
   
   
            
   
   <table align="center"> 
   
   
            
   
   <tr> 
   
   
            
   
       <td>學號：</td> 
   
   
            
   
       <td> 
   
   
            
   
           <input type="text" name="xueHao"> 
   
   
            
   
       </td> 
   
   
            
   
   </tr> 
   
   
            
   
   <tr> 
   
   
            
   
       <td>姓名：</td> 
   
   
            
   
       <td> 
   
   
            
   
           <input type="text" name="userName"> 
   
   
            
   
       </td> 
   
   
            
   
   </tr> 
   
   
            
   
   <tr> 
   
   
            
   
       <td>密碼：</td> 
   
   
            
   
       <td> 
   
   
            
   
           <input type="password" name="password"> 
   
   
            
   
       </td> 
   
   
            
   
   </tr> 
   
   
            
   
   <tr> 
   
   
            
   
       <td>性別：</td> 
   
   
            
   
       <td> 
   
   
            
   
           <input type='radio' name='sex' value='1'>男  
   
   
            
   
           <input type='radio' name='sex' value='0'>女  
   
   
            
   
       </td> 
   
   
            
   
   </tr> 
   
   
            
   
   <tr> 
   
   
            
   
       <td>出生日期：</td> 
   
   
            
   
       <td> 
   
   
            
   
           <input type="text" name="birthday"> 
   
   
            
   
       </td> 
   
   
            
   
   </tr> 
   
   
            
   
   <tr> 
   
   
            
   
       <td>郵箱：</td> 
   
   
            
   
       <td> 
   
   
            
   
           <input type="text" name="email"> 
   
   
            
   
       </td> 
   
   
            
   
   </tr> 
   
   
            
   
   <tr> 
   
   
            
   
       <td>聯繫電話：</td> 
   
   
            
   
       <td> 
   
   
            
   
           <input type="text" name="phone"> 
   
   
            
   
       </td> 
   
   
            
   
   </tr> 
   
   
            
   
   <tr> 
   
   
            
   
       <td>生源地: </td> 
   
   
            
   
       <td> 
   
   
            
   
           <select name="sheng" id="sheng" onchange="selShi()"> 
   
   
            
   
               <option value="0">-----請選擇-----</option> 
   
   
            
   
           </select>省  
   
   
            
   
           <select name="shi" id="shi"> 
   
   
            
   
               <option value="0">-----請選擇-----</option> 
   
   
            
   
           </select>市  
   
   
            
   
       </td> 
   
   
            
   
   </tr> 
   
   
            
   
   <tr> 
   
   
            
   
       <td align="center"> 
   
   
            
   
           <input type="submit" value="註冊"> 
   
   
            
   
       </td> 
   
   
            
   
       <td> 
   
   
            
   
           <input type="button" value="返回" onclick="window.location.href('index.jsp')"> 
   
   
            
   
       </td> 
   
   
            
   
   </tr> 
   
   
            
   
     </table> 
   
   
            
   
    </form> 
   
   
            
   
      
   
   
            
   
   <script type="text/javascript">selSheng();</script> 
   
   
            
   
   </body> 
   
   
            
   
   </html>

2.web.xml配置servlet：html

  
  
           
  
  
   
   
            
   
   <servlet>   
   
   
            
   
     <servlet-name>nation</servlet-name>   
   
   
            
   
     <servlet-class>com.servlet.AjaxServlet</servlet-class>   
   
   
            
   
   </servlet>   
   
   
            
   
   <servlet-mapping>   
   
   
            
   
     <servlet-name>nation</servlet-name>   
   
   
            
   
     <url-pattern>/nation.do</url-pattern>     
   
   
            
   
   </servlet-mapping>

3.建立AjaxServlet類繼承於HttpServlet抽象類：AjaxServlet.javajava

  
  
           
  
  
   
   
            
   
   package com.servlet;  
   
   
            
   
    
   
   
            
   
   import java.io.IOException;  
   
   
            
   
   import java.util.ArrayList;  
   
   
            
   
   import java.util.List;  
   
   
            
   
   import java.util.Map;  
   
   
            
   
    
   
   
            
   
   import javax.servlet.http.HttpServlet;  
   
   
            
   
   import javax.servlet.http.HttpServletRequest;  
   
   
            
   
   import javax.servlet.http.HttpServletResponse;  
   
   
            
   
    
   
   
            
   
   import com.service.UserService;  
   
   
            
   
    
   
   
            
   
   public class AjaxServlet extends HttpServlet  
   
   
            
   
   {  
   
   
            
   
    
   
   
            
   
       /**  
   
   
            
   
        * {字段功能描述}  
   
   
            
   
        */ 
   
   
            
   
       private static final long serialVersionUID = -5798085591055475615L;  
   
   
            
   
       /**  
   
   
            
   
        *   
   
   
            
   
        * {獲取ajax發送的請求}  
   
   
            
   
        *   
   
   
            
   
        * @param request  
   
   
            
   
        * @param response  
   
   
            
   
        * @throws IOException  
   
   
            
   
        * @author:LJ  
   
   
            
   
        */ 
   
   
            
   
       protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {   
   
   
            
   
           String selValue=request.getParameter("method");  
   
   
            
   
           if("getSheng".equals(selValue))  
   
   
            
   
           {  
   
   
            
   
               this.getSheng(request, response);  
   
   
            
   
           }  
   
   
            
   
           else if("getShi".equals(selValue))  
   
   
            
   
           {  
   
   
            
   
               this.getShi(request, response);  
   
   
            
   
           }  
   
   
            
   
       }   
   
   
            
   
       /**  
   
   
            
   
        *   
   
   
            
   
        * {獲取省列表}  
   
   
            
   
        *   
   
   
            
   
        * @param request  
   
   
            
   
        * @param response  
   
   
            
   
        * @throws IOException  
   
   
            
   
        * @author:LJ  
   
   
            
   
        */ 
   
   
            
   
       @SuppressWarnings("unchecked")  
   
   
            
   
       protected void getSheng(HttpServletRequest request, HttpServletResponse response) throws IOException {   
   
   
            
   
           List<Map> selList = new ArrayList<Map>();  
   
   
            
   
           UserService userService = new UserService();  
   
   
            
   
           selList = userService.querySheng();  
   
   
            
   
           //拼接json格式文本  
   
   
            
   
           StringBuffer jsonStr = new StringBuffer();  
   
   
            
   
           jsonStr.append("{\"nation\":[");  
   
   
            
   
           for(Map map:selList)  
   
   
            
   
           {  
   
   
            
   
               jsonStr.append("{\"DM\":");  
   
   
            
   
               jsonStr.append(map.get("DM"));  
   
   
            
   
               jsonStr.append(",\"MC\":\"");  
   
   
            
   
               jsonStr.append(map.get("MC"));  
   
   
            
   
               jsonStr.append("\"},");  
   
   
            
   
           }  
   
   
            
   
           jsonStr.deleteCharAt(jsonStr.length()-1);  
   
   
            
   
           jsonStr.append("]}");  
   
   
            
   
           //將json文本返回  
   
   
            
   
           response.getWriter().print(jsonStr.toString());   
   
   
            
   
       }   
   
   
            
   
       /**  
   
   
            
   
        *   
   
   
            
   
        * {獲取對應省的市列表}  
   
   
            
   
        *   
   
   
            
   
        * @param request  
   
   
            
   
        * @param response  
   
   
            
   
        * @throws IOException  
   
   
            
   
        * @author:LJ  
   
   
            
   
        */ 
   
   
            
   
       @SuppressWarnings("unchecked")  
   
   
            
   
       protected void getShi(HttpServletRequest request, HttpServletResponse response) throws IOException {   
   
   
            
   
           String selValue=request.getParameter("sheng");  
   
   
            
   
           List<Map> selList = new ArrayList<Map>();  
   
   
            
   
           UserService userService = new UserService();  
   
   
            
   
           selList = userService.queryShi(selValue);  
   
   
            
   
           //拼接json格式文本  
   
   
            
   
           StringBuffer jsonStr = new StringBuffer();  
   
   
            
   
           jsonStr.append("{\"nation\":[");  
   
   
            
   
           for(Map map:selList)  
   
   
            
   
           {  
   
   
            
   
               jsonStr.append("{\"DM\":");  
   
   
            
   
               jsonStr.append(map.get("DM"));  
   
   
            
   
               jsonStr.append(",\"MC\":\"");  
   
   
            
   
               jsonStr.append(map.get("MC"));  
   
   
            
   
               jsonStr.append("\"},");  
   
   
            
   
           }  
   
   
            
   
           jsonStr.deleteCharAt(jsonStr.length()-1);  
   
   
            
   
           jsonStr.append("]}");  
   
   
            
   
           //將json文本返回  
   
   
            
   
           response.getWriter().print(jsonStr.toString());   
   
   
            
   
       }   
   
   
            
   
   }