Ajax + jQuery實現下拉框聯動

        很久沒有研究JavaEE的前端代碼了，這段時間爲了實現一個頁面下拉列表的多級聯動。百度的時候遇到了各種坑，各種問題無法解決，最後還是結合各種說法，合併找到了答案。這裏將自己解決問題的過程總結如下：

        這裏只貼上部分核心代碼。

        頁面部分代碼：

        

<li>省份：
     <select name="province" id="province" style="width:200px" onchange="javascript:getCityList();">
         <c:forEach items="${provinceList}" var="item" varStatus="status">
             <option value="${item.provinceCode }">${item.provinceName }</option>
         </c:forEach>
     </select>
</li>

<li>城市：
    <select name="city" id="city" style="width:200px">
        <option value="-100">請選擇...</option>
    </select>
</li>

JS代碼：

    function getCity() {
            var objSelect = document.getElementById("city");
            merchantNo = $('province').val();
            $.ajax({
                type: "post",//使用get方法訪問後臺
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                url: "${ctx }/webservice/getCity",//要訪問的後臺地址
                data: {
                    'province': province
                },
                success: function (data) {
                    data = decodeURI(data);
                    var data = eval('(' + data + ')');
                    if (data.length != "" && data.length != null) {
                        for (var i = 0; i < data.length; i++) {
                            objSelect.options.add(new Option(data[i].cityName, data[i].cityCode));
                        }
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("Error!");
                }
            });
        }

後端代碼：

    @ResponseBody
    @RequestMapping(value = "/getCity")
    public String getCity(final ModelMap model, @RequestParam Map<String, String> params, HttpServletResponse response) {
                response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        try {
			String province = params.get("province"); // 獲取請求數據中的省份
            String[] cityArray = getCity(province);
            String json = JSONArray.toJSONString(cityArray);
            json = URLEncoder.encode(json, "UTF-8");
            
            return json;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "Error!";
    }

    public String[] getCity(String province) {
        Map<String, String[]> cityMap = new HashMap<>();
        cityMap.put("湖北", new String[]{"武漢", "十堰", "宜昌", "荊門", "襄陽"});
        cityMap.put("廣東", new String[]{"武漢", "十堰", "宜昌", "荊門", "襄陽"});
        return cityMap.get(province);
    }

這裏有幾個需要注意的地方：

1. @ResponseBody 註解一定要加上    

2. webservice和jQuery數據轉換問題。爲了保證jQuery接收顯示的數據不爲亂碼，在後端返回數據時，使用           URLEncode對數據進行編碼，在JS接收的時候，使用decodeURI進行解碼，decodeURI(data)

    response.setCharacterEncoding("UTF-8");

    response.setContentType("text/html;charset=UTF-8");

    JS代碼設置：

    contentType: "application/x-www-form-urlencoded; charset=UTF-8"