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")@ResponseBodypublic 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是namespacedata : {//设置数据源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);} //这里不要加","});});});

效果

Published by

风君子

独自遨游何稽首 揭天掀地慰生平