谷歌生成在线网站地图,阿里巴巴招聘官网,搜索引擎优化指南,贸易公司如何找客户一、问题描述这周搬砖的时候#xff0c;前端通过ajax获取后端的数据后#xff0c;照例用 对象.属性 的方式取值#xff0c;然而结果总是总是不能如预期般展示在页面上。先写个 demo 还原下场景#xff1a;选中一个下拉框列表选项后#xff0c;会在下拉框下面展示文字。这是…一、问题描述这周搬砖的时候前端通过ajax获取后端的数据后照例用 对象.属性 的方式取值然而结果总是总是不能如预期般展示在页面上。先写个 demo 还原下场景选中一个下拉框列表选项后会在下拉框下面展示文字。这是下拉框的html部分JSON DEMO终端设备PC WebPHP代码如下用来返回数据(接收、处理过程略)$onLines [1 PC Web,2 iPad HD,5 Touch];echo json_encode([data $onLines]);JS代码如下$(#device).change(function() {var selectVal $(#device).val();if (selectVal ) {$(#tip).html();return;}# code... ajax 部分的代码见下});ajax 部分的代码用来接收从后端(PHP)传过来的数据并处理。$.ajax({url: device.php,type: post,dateType: json,data: {device: selectVal},success: function(result) {var onlineDevices result.data;var onlineTip 允许 onlineDevices[selectVal] 类型的2台设备同时在线。;$(#tip).html();$(#tip).append(onlineTip);}});使用 console.log 在控制台输出结果如下图所示可以看到后端返回的数据是没有问题的再使用 typeof 查看返回的数据类型前端收到的数据是JSON字符串而不是JSON对象success: function(result) {console.log(result);console.log(result.data);console.log(typeof result);}二、解决方法找到问题就好办了只需要把 json 字符串转成 json 对象就好了最简单的办法是 JSON.parse()。success: function(result) {var onlineDevices JSON.parse(result).data;# code ...}三、总结1、json字符串和json对象的区别// JSON 字符串var str1 {data:{1:PC Web,2:iPad HD,5:Touch}};// JSON 对象var str2 {data:{1:PC Web,2:iPad HD,5:Touch}};console.log(str1);console.log(typeof str1);console.log(str2);console.log(typeof str2);可以看到json字符串和json对象的形式很像但前者比后者多了一对引号其内容包含在引号里了。调试台的结果如下2、json字符串转为json对象的方法后端设置header头中的内容类型将 Content-Type 设置为 text/json。header(Content-Type:text/json;charsetutf-8);注前端直接处理即可不需要 JSON.parse() 处理。但项目中用的是框架所有的PHP文件(业务层)均没有显式设置 header虽然在demo中此方法有效可依然不明白为什么别的地方返回的是json对象而这里返回的却是json字符串了。强制类型转换(object) 此方法无效如果将一个对象转换成对象它将不会有任何变化。如果其它任何类型的值被转换成对象内置标准类 stdClass 的一个实例将被建立。以上面的数组为例强制类型转换的结果如下var_dump((object)[data $onLines]);// 结果如下object(stdClass)#1 (1) {[data]array(3) {[1]string(6) PC Web[2]string(7) iPad HD[5]string(5) Touch}}而json_encode((object)[data $onLines]);得到的还是json字符串。前端var obj JSON.parse(str);JSON.parse()方法必须保证传入的是json字符串如果是json对象会报错。var obj jQuery.parseJSON(str);parseJSON()方法是jQuery方法仅支持标准json格式否则会报错。下面这些是无效的 JSON 字符串{test: 1}//test是属性名称必须加双引号{test: 1}//test是属性名称必须用双引号(不能用单引号)test//test是属性名称必须用双引号(不能用单引号)undefined//undefined 不能表示一个 JSON 字符串; null可以NaN//NaN 不能表示一个 JSON 字符串; 用Infinity直接表示无限也是不允许的var obj eval(( str ));eval()方法是js方法也是必须保证传入的是json字符串否则会报错。四、疑惑查了一下PHP的 json_encode()函数PHP手册给出的结论是成功时返回字符串。Return ValuesReturns a JSON encoded string on success or FALSE on failure.既然json_encode()函数返回的是字符串为什么在项目中其他地方可以直接使用 对象.属性 的方式呢后记 更新于2019-02-25今天不死心又研究了一下还问了一个朋友对方提醒估计大概率是编码和头的设置有问题然后我逐行查代码发现 ajax 部分的dataType我写成了dateType一字之差~噢天啊太丢人了以后绝对不能再犯这么二的错误了
