問題：為什麼需要把查詢結果轉換為json(未解決)

資料庫中：一行記錄對應多個物件時，需要使用Map對應多個物件

json的省市聯動

dao:
    1)查詢所有省
    2）通過省查詢指定市
servlet：
    1)把所有省轉換成json，傳送給客戶端
    2)通過獲取省名稱，查詢該省內所有市，顯示在<select id="province">
ajax1.jsp
    1)頁面載入完後：訪問servlet，得到所有省，顯示在<select id="province">
    2)頁面載入完後：給<select id="province">新增onchange事件監聽.
                         監聽內容:獲取選擇省名稱，訪問servlet得到所有市，顯示在<select id="city">


導檔案：連線資料庫的配置檔案  c3p0-config.xml （src下）
 

導包：

程式碼：

dao

public class Dao {
    private QueryRunner qr = new TxQueryRunner();

    /**
     * 查詢所有的省
     * @return 
     * @return
     */
    @Test
    public List<Province> findAllProvince(){
        try {

            String sql = "select * from t_province";
            return
 
 qr.query(sql, new BeanListHandler<Province>(Province.class));

        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
    }

    /** 
     * 根據省名查詢所有城市
     * @param proname
     * @return
     */
    public List<City> findAllCity(int pid){ //根據省名查詢

        try
 
{
            String sql = "select * from t_city where pid=? ";
            return qr.query(sql, new BeanListHandler<City>(City.class),pid);
        }catch(SQLException e){
            throw new RuntimeException(e);
        }
    }
}

Servelt

//CityServlet 
public class CityServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        /*
         * 1.獲取省名稱對應的pid引數     request.getParameter("pid");
         * 2.使用省id查詢資料庫，得到List<City>
         * 3.轉換為json
         * 4.傳送給客戶端
         */

        //1.獲取省名稱對應的pid引數   並將字串轉換成int型  
        //request.getParameter("pid")  獲取引數
        //Integer.parseInt()  轉換字串為int
        int pid = Integer.parseInt(request.getParameter("pid"));

        //2.使用省id查詢資料庫，得到List<City>
        Dao dao = new Dao();
        List<City> cityList = dao.findAllCity(pid);

        //3.轉換為json
        String json = JSONArray.fromObject(cityList).toString();

        response.getWriter().print(json);
    }
}

//ProvinceServlet 

public class ProvinceServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");

        /*
         * 1.通過dao得到所有的省
         * 2.把List<Province>轉換成json
         * 3.傳送給客戶端
         */

        //1.通過dao得到所有的省
        Dao dao = new Dao();
        List<Province> provinceList = dao.findAllProvince();

        //2.把List<Province>轉換成json  便於在js中輸出
        String json = JSONArray.fromObject(provinceList).toString();

        response.getWriter().print(json);//3.傳送給客戶端
    }
}

jsp

<script type="text/javascript">
    function createXMLHttpRequest() {
        try {
            return new XMLHttpRequest();
        } catch (e) {
            try {
                return new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    return new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    alert("哥們兒，你用的是什麼瀏覽器啊？");
                    throw e;
                }
            }
        }
    }

    /*
1.得到所有省：
    a> 在文件載入完畢時傳送請求，
    b> 使用ajax請求ProvinceServlet，得到所有省份名稱。
    c> 顯示在<select id="pro"/>中
      */
    window.onload = function() {
        var xmlHttp = createXMLHttpRequest();
        xmlHttp.open("GET" , "<c:url value='/ProvinceServlet'/>",true);
        xmlHttp.send(null);
        xmlHttp.onreadystatechange = function() {

            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

                //執行伺服器傳送過來的json字串，得到js物件陣列
                var proArray = eval("(" + xmlHttp.responseText + ")");

                //遍歷陣列，使用每一個物件，建立並新增到opion中
                for(var i = 0; i < proArray.length; i++){
                    //得到陣列內物件
                    var pro = proArray[i];

                    //建立option元素
                    var option = document.createElement("option");

                    //為option設定實際值、顯示值
                    option.value = pro.pid;   //對<option>實際值賦為pid
                        //對TextNode賦值為pro.name，並建立文字節點
                    option.appendChild(document.createTextNode(pro.name)); 

                    //把option新增到select中
                    document.getElementById("pro").appendChild(option);
                }
            }
        };

        /*
2.  給<select name="province">註冊改變監聽。
    監聽內容：
        //先清空city中原有的option
        a>獲取當前省id
        b>使用省id訪問CityServlet,得到省內所有市
        c>使用市名生成<option>，插入到<select id="city">元素中
        */
        var proSelect = document.getElementById("pro")
        proSelect.onchange = function(){
            /*
            非同步操作，傳送pid。
            需要先清空city中原有的option
            */
            var xmlHttp = createXMLHttpRequest();

            //開啟
            xmlHttp.open("POST","<c:url value='/CityServlet'/>", true);
            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            //傳送     option的value就是select的value   
            xmlHttp.send("pid=" + proSelect.value); //該省的value就是pid（在新增option時設定的）   

            //監聽
            xmlHttp.onreadystatechange = function(){
                 if(xmlHttp.readyState == 4 && xmlHttp.status ==200){

                //清空select中所有option（除了當前選擇）         

                    var citySelect = document.getElementById("c");
                    // 獲取其所有子元素
                    var optionEleList = citySelect.getElementsByTagName("option");
                    // 迴圈遍歷每個option元素，然後在citySelect中移除
                    while(optionEleList.length > 1) { //子元素的個數如果大於1就迴圈，等於1就不迴圈了！
                        citySelect.removeChild(optionEleList[1]);  //總是刪除1下標，因為1刪除了，2就變成1了！
                    }


                    //執行伺服器傳送過來的json字串，得到js物件陣列
                     var cityArray = eval("("+ xmlHttp.responseText +")");

                    for(var i = 0; i< cityArray.length; i++){
                        //得到陣列內物件
                        var c = cityArray[i]; 

                        //建立option
                        var cityoption = document.createElement("option");

                        //為cityoption賦 顯示值、實際值
                        cityoption.value = c.cid;
                        cityoption.appendChild(document.createTextNode(c.name));

                        //將cityoption新增到select中
                        citySelect.appendChild(cityoption);
                    }
                 }
             };     
        };
    };
</script>

</head>
<body>
<h1>省市聯動</h1>
    <select name=province id="pro">
        <option value="">===請選擇===</option>
    </select>
    <select name=city id="c">
        <option value="">===請選擇===</option>
    </select>
</body>

domain

public class City {
    private int cid;
    private String name;
    private Province province;  //多方關聯一方
}

public class Province {
    private int pid;
    private String name;
    private List<City> cityList;  //一方關聯多方
}