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());   
   
   
            
   
       }   
   
   
            
   
   }