解决Ajax加载JSon数据中文乱码问题

 更新时间:2017年10月23日 14:44:27   作者:凡尘炼心  
这篇文章主要介绍了解决Ajax加载JSon数据中文乱码问题,需要的朋友可以参考下

一、问题描述

使用zTree的异步刷新父级菜单时,服务器返回中文乱码,但项目中使用了SpringMvc,已经对中文乱码处理,为什么还会出现呢?

此处为的异步请求的配置:

Java代码 

async: { 
  enable: true, 
  url: basePath + '/sysMenu/listSysMenu', 
  autoParam: ["id=parentId"] 
} 

SpringMvc中文字符处理:

Java代码 

<mvc:annotation-driven> 
  <mvc:message-converters> 
  <bean class="org.springframework.http.converter.StringHttpMessageConverter"> 
    <property name="supportedMediaTypes"> 
       <list> 
          <value>application/json;charset=UTF-8</value> 
      <value>text/html;charset=UTF-8</value> 
     </list> 
    </property> 
  </bean> 
 </mvc:message-converters> 
</mvc:annotation-driven> 

返回的结果有中文乱码:

Js代码 

[ 
  { 
    "menuId": "880095098165986816", 
    "menuName": "????", 
    "parentId": "880095098165986815", 
    "menuUrl": "http://localhost:8080/imovie-manage/sysMenu/listSysMenuUI", 
    "menuIcon": "", 
    "menuSort": 1, 
    "isEnable": 1, 
    "parentMenuName": "??", 
    "id": "880095098165986816", 
    "name": "????", 
    "pId": "880095098165986815" 
  }, 
  { 
    "menuId": "880095098165986817", 
    "menuName": "???????", 
    "parentId": "880095098165986815", 
    "menuUrl": "http://localhost:8080/imovie-manage/sysMenu/treeSysMenuUI", 
    "menuIcon": "", 
    "menuSort": 1, 
    "isEnable": 1, 
    "parentMenuName": "??", 
    "id": "880095098165986817", 
    "name": "???????", 
    "pId": "880095098165986815" 
  } 
] 

二、解决方案

经过排查,发现是SpringMvc中文字符处理的supportedMediaTypes少了一种类型。

从浏览器发送的请求来看:

异步刷新使用的是post请求,但从服务器返回的时候,Content-Type为:text/plain;charset=ISO-8859-1

charset是ISO-8859-1,而不是UTF-8,而SpringMvc处理的中文乱码没有包含这种类型,所以导致中文乱码。

所以最后的解决方法是在SpringMvc中文处理加上text/plain这个类型,如下:

Java代码

<value>text/plain;charset=UTF-8</value> 

 具体如下:

Java代码

<property name="supportedMediaTypes"> 
  <list> 
    <value>application/json;charset=UTF-8</value> 
  <value>text/html;charset=UTF-8</value> 
  <value>text/plain;charset=UTF-8</value> 
  </list> 
</property> 

总结

以上所述是小编给大家介绍的解决Ajax加载JSon数据中文乱码问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Ajax 接收服务器返回的json响应方法

    Ajax 接收服务器返回的json响应方法

    今天小编就为大家分享一篇Ajax 接收服务器返回的json响应方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 如何创建ajax对象并兼容多个浏览器

    如何创建ajax对象并兼容多个浏览器

    这篇文章主要介绍了创建ajax对象并兼容多个浏览器方法简单记录,在某些情况下还是比较实用的,需要的朋友可以参考下
    2014-08-08
  • Ajax+php数据交互并且局部刷新页面的实现详解

    Ajax+php数据交互并且局部刷新页面的实现详解

    这篇文章主要给大家介绍了关于利用Ajax与php数据交互并且局部刷新页面的实现方法,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。
    2017-07-07
  • jQuery+Ajax+PHP实现“喜欢”评级功能附源码下载

    jQuery+Ajax+PHP实现“喜欢”评级功能附源码下载

    有同学问我如何实现一个像美丽说那样的“我喜欢”评级功能,当用户看到自己喜欢的图片或文章时,点击“红心”按钮,系统会自动记录用户的点击,并将总数加1。这样再结合不同的系统,可以将此功能应用到投票或收藏商品中去(如淘宝的收藏商品)。
    2015-10-10
  • 基于fileUpload文件上传带进度条效果的实例(必看)

    基于fileUpload文件上传带进度条效果的实例(必看)

    下面小编就为大家带来一篇基于fileUpload文件上传带进度条效果的实例(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • IE9 IE8 ajax跨域问题的快速解决方法

    IE9 IE8 ajax跨域问题的快速解决方法

    下面小编就为大家带来一篇IE9 IE8 ajax跨域问题的快速解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • ajax请求后台接口数据与返回值处理js的实例讲解

    ajax请求后台接口数据与返回值处理js的实例讲解

    今天小编就为大家分享一篇ajax请求后台接口数据与返回值处理js的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • JS AJAX前台如何给后台类的函数传递参数

    JS AJAX前台如何给后台类的函数传递参数

    这篇文章主要介绍了JS AJAX前台给后台类的函数传递参数的方法,下面有个不错的示例,需要的朋友可以参考下
    2014-06-06
  • ajax 服务器文本框自动填值

    ajax 服务器文本框自动填值

    最近二天。项目做完了。闲着没事做就自己写了一点东西。在写的过程中。发现利用服务器的文本框去查找用户的相关信息的时刻总要去刷新页面。
    2009-06-06
  • 解决ajax传过来的值后台接收不到的问题

    解决ajax传过来的值后台接收不到的问题

    今天小编就为大家分享一篇解决ajax传过来的值后台接收不到的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论