Ajax JSON 中文乱码

Ajax JSON 中文乱码 List转JSON，JSON转String

我在使用级联下拉框的时候用到Ajax技术向后台请求子框的信息。但是出现了中文乱码的问题，我尝试了3种方法，发现了一条做最好的解决方法。

思路：

1.在前台获取父框的ID，通过ajax提交到后台

2.后台根据父框ID获取子框List集合

3.将List集合转换成JSON格式

4.将JSON格式转换为字符串（String）格式，并输入到response的write里

5.在前台获取字符串，在转换成JSON格式，并通过js打印输出

后台Controller

@RequestMapping("getSonBoard")
    @ResponseBody
    public void getSonBoard(int id, HttpServletResponse response){
        //处理乱码问题
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        List<Sonboard> sonboards=boardService.getSonBoardsByFaterBoardId(id);
        //JSON包使用org.json.*;
        JSONArray jsonArray=new JSONArray();
        //将LIST集合转换为json格式
        for(Sonboard board:sonboards){
            JSONObject object=new JSONObject();
            object.put("id",board.getSonboardId());
            object.put("name",board.getBoardName());
            jsonArray.put(object);
        }

        try {
            //将json的字符串形式写进response里
            response.getWriter().print(jsonArray.toString());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
           

前台

<tr>
				<td style="width: 20%; height: 40px; background-color: #E5F4FB;">选择版块</td>
				<td style="width: 80%; height: 40px;text-align:left;">
					<div class="form-group">

						<!-- 循环遍历下拉框 -->
						<select class="form-control" id="fatherboard"
								style="width:300px;float:left; ">
							<option value="0" selected="selected">-选择大板块-</option>
							<c:forEach items="${boards}" var="board">
								<option value="${board.boardId}"> ${board.boardName} </option>
							</c:forEach>

						</select>
						<select class="form-control" id="sonboard" name="boardid" style="width:200px; float:left; ">
								<option value="">-选择小板块-</option>
						</select>
						<span style="color:red;">请选择所要发帖的版块</span>
					</div>

				</td>
			</tr>
           

<script type="text/javascript">
    $(document).ready(function() {
        //change用于截获下拉框的状态变化
        $("#fatherboard").on('change', function() {
            //获取父框的选择值
            var id = $(this).val();
            $.ajax({
                type : "post",
                url : "getSonBoard", //需要用来处理ajax请求的action,findson为方法名,board是namespace
                data : {
                    //设置数据源
                    id : $(this).val()
                },
                scriptCharset: 'utf-8',
                success : function(data) {
					//var json= JSON.stringify(data);
					json = eval("(" + data + ")"); //将数据转换成json类型，可以把data用alert()输出出来看看到底是什么样的结构
                    //清空子下拉框
                    $('#sonboard').empty();
                    //循环变量子下拉框
                    for (var i = 0; i < json.length; i++) {
                        var s = json[i];
                        $('#sonboard').append("<option value=" + s.id + ">" + s.name + "</option>");
                    }
                },
                error : function(data) {
                    alert("系统异常，请稍后重试！"+data);
                } //这里不要加","
            });
        });
    });
           

效果