vue填坑记录:axios 返回中文乱码问题

以前接口都是php写的,echo 出 json 串给页面jQuery ajax用的。

//.php file format gbk
public function queryHeroList(){
    $hero = '[{"ename":105,"cname":"廉颇","title":"正义爆轰","pay_type":10,"new_type":0,"hero_type":3,"skin_name":"正义爆轰|地狱岩魂"}]';
    echo iconv('gbk','utf-8',$hero);exit();
}

返回的是unicode编码的,如下格式:

[{"ename":120,"cname":"\u767d\u8d77","title":"\u6700\u7ec8\u5175\u5668","new_type":0,"hero_type":3,"skin_name":"\u6700\u7ec8\u5175\u5668|\u767d\u8272\u6b7b\u795e|\u72f0"}]

浏览器看到的是如下response head

奇怪的是,,,在pc浏览器上,一切正常,axios取到的数据,插入到页面上,显示也没有乱码。但是,放到iphone UC浏览器上就有问题了,乱码。

我们看下 axois 的参数:

  // `responseType` indicates the type of data that the server will respond with
  // options are 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // default

  // `responseEncoding` indicates encoding to use for decoding responses
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncoding: 'utf8', // default

默认按照utf-8格式去解析。估计是这个原因了,

因此,咱们最好还是在php接口上显示注明一下编码 Header,如下:

//.php file format gbk
public function queryHeroList(){
    $hero = '[{"ename":105,"cname":"廉颇","title":"正义爆轰","pay_type":10,"new_type":0,"hero_type":3,"skin_name":"正义爆轰|地狱岩魂"}]';
    header("Content-Type:application/json;charset=UTF8");    //php文件是gbk格式,但是吐出数据声明是utf8的。
    echo iconv('gbk','utf-8',$hero);exit();
}

即可解决问题了。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java帮帮-微信公众号-技术文章全总结

Maven 核心原理解析(3)

元素继承 可以看到, 子POM中并未定义模块groupId与version, 这是因为子POM默认会从父POM继承了如下元素: groupId、version...

5114
来自专栏祝威廉

Kafka Zero-Copy 使用分析

Kafka 我个人感觉是性能优化的典范。而且使用Scala开发,代码写的也很漂亮的。重点我觉得有四个

1512
来自专栏个人分享

sparksql工程小记

  最近做一个oracle项目迁移工作,跟着spark架构师学着做,进行一些方法的总结。

1683
来自专栏木子墨的前端日常

easyUI datagrid 清空

最近在做一个管理系统,出于一些需要,经常要将一些datagrid清空。然后easyUI本身并没有自带的方法,然后自己动手丰衣足食吧。

1033
来自专栏HappenLee的技术杂谈

C++雾中风景番外篇2:Gtest 与 Gmock,聊聊C++的单元测试

笔者目前使用的系统是Deepin 15.6,是基于 Debian jessie的一款国内发行版。安装 Gtest 和 GMock 十分简单:

1934
来自专栏刘望舒

Android内存优化(五)详解内存分析工具MAT

前言 在这个系列的前四篇文章中,我分别介绍了DVM、ART、内存泄漏和内存检测工具的相关知识点,这一篇我们通过一个小例子,来学习如何使用内存分析工具MAT。 ...

4098
来自专栏分布式系统进阶

ReplicaManager源码解析1-消息同步线程管理

基本上就是作三件事: 构造FetchRequest, 同步发送FetchRequest并接收FetchResponse, 处理FetchResponse, 这三...

1412
来自专栏林德熙的博客

win10 UWP 显示地图

第一步引用地图xmlns:Map="using:Windows.UI.Xaml.Controls.Maps"

1031
来自专栏黑泽君的专栏

去除Notepad++打开文件后文字下面出现红色波浪线的问题

也有时候我们一打开Notepad++就会看到满眼的红色波浪线,很是不爽,今天就手把手教大家如何去除文章中下面的红色波浪线。

922
来自专栏黑泽君的专栏

day50_BOS项目_02

我们再补上IUserDao和UserDaoImpl的示例代码: IUserDao.java

692

扫码关注云+社区