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

1.jsp註冊頁面：register.jsp

<%@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：

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

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

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

《Python進階》學習筆記

微服務實踐之使用 Visual Studio 2022 調試Dapr 應用程序

wpf附加屬性理解 WPF附加屬性

數字順序、字母逆序排序，並且字母與數字交替排列

約瑟夫問題求解

Struts1 分頁

存儲過程遊標遍歷

JDBC封裝

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結