一、问题描述

这周搬砖的时候，前端通过ajax获取后端的数据后，照例用 对象.属性 的方式取值，然而结果总是总是不能如预期般展示在页面上。

先写个 demo 还原下场景：选中一个下拉框列表选项后，会在下拉框下面展示文字。

这是下拉框的html部分：

<html>

<head>

	<title>JSON DEMO</title>

	<meta charset="UTF-8">

</head>

<body>

	<select id="device">

		<option value="">终端设备</option>

		<option value="1">PC Web</option>

		<!-- <option>...</option> -->

	</select>

	<div id="tip"></div>

</body>

</html>

PHP代码如下：用来返回数据（接收、处理过程略）

<?php

$onLines = [

	1 => 'PC Web',

	2 => 'iPad HD',

	5 => 'Touch'

];

echo json_encode(['data' => $onLines]);

JS代码如下：

<script type="text/javascript">

	$("#device").change(function() {

		var selectVal = $("#device").val();

		if (selectVal == '') {

			$("#tip").html('');

            return;

		}

		# code... ajax 部分的代码见下

	});

</script>

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;charset=utf-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 Values

Returns a JSON encoded string on success or FALSE on failure.

既然json_encode()函数返回的是字符串，为什么在项目中其他地方可以直接使用 对象.属性 的方式呢？

后记 更新于2019-02-25

今天不死心，又研究了一下，还问了一个朋友，对方提醒估计大概率是编码和头的设置有问题，然后我逐行查代码，发现 ajax 部分的dataType我写成了dateType，一字之差~

噢，天啊，太丢人了！以后绝对不能再犯这么二的错误了！

PHP的json_encode()函数与JSON对象的更多相关文章

  1. eval() 函数 解析json对象

    eval在js中用来运行以js源码组成的字符串. 可以用来改变全局或者局部变量,例如: var globalEval = eval; //定义全局eval函数别名 var a ='global', b ...

  2. json对象之间的转化

    json字符串转化为 1.使用JSON.parse()函数 使用eval()函数 2.json对象转化为json字符串 使用JSON.stringify()

  3. PHP中json_encode()使用须知，JSON数组和JSON对象

    ⊰ 偷偷的告诉你,这是一个很不谨慎就会踩得坑 ⊱  如下代码 (看了一下很简单,没毛病啊,老铁) $arr = array( '0'=>'a','1'=>'b','2'=>'c',' ...

  4. php json_encode()函数返回对象和数组问题

    php json_encode() 函数格式化数据时会根据不同的数组类型格式化不同类型的json数据 索引数组时 <?php $arr = [1,2,3,4,5]; print_r(json_e ...

  5. js学习-自定义函数、对象的字面量、json对象学习小结

    一.自定义对象的构造: var student=new Object(); //object是顶级对象,使用构造函数的方法创建一个对象,此处的意思是创建了一个学生的空对象 student.name=& ...

  6. Js对象转String的函数 和 JSON转String

    js对象转string的函数 function obj2str(o){ var r = []; if(typeof o =="string") return "" ...

  7. 关于JSON对象，以及联合数组，eval函数的使用参考

    关于JSON对象,以及联合数组,eval函数的使用参考 var json="{persons:[{name:'Zhangsan',sex:'male'},{name:'Lisi',sex:' ...

  8. 关于json_encode转数组为json对象时里有数组格式数据的问题

    前言:这次是给一款小程序提供接口时发现的 别的不多说,下面直接看出现问题的json数据 可以看到,这是一个大的json对象,是由多维数组组成,一般api接口提供的也是这种格式. 但是仔细看红框中的内容 ...

  9. JSON对象和JSON字符串以及JSON.parse 函数的使用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. python,day3,函数基础-3

    本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 嵌套函数 4.递归 5.匿名函数 6.函数式编程介绍 7.高阶函数 8.内置函数 1.函数基本语法及特性 函数是什么? 函数一词 ...

  2. JAVA EE 第二周（XML简述以及web请求的过程）

    一. 对于XML,我分别从以下几个方面来简述: 1.定义: XML是一种可扩展的标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言. (可扩展标记语言:可扩展标记语言是一 ...

  3. Linux CAN Shell 测试脚本程序

    2012-01-13 22:57:14 为我的开发板2440做二次开发,添加了can驱动,做了驱动测试程序,没理由不添加一个测试脚本程序啊!修改了测试程序,使应用程序更加灵活,添加了一下传递参数.接着 ...

  4. C博客第02次作业---循环结构

    1.本章学习总结 1.1 思维导图 1.2 本章学习体会及代码量 1.2 本章学习体会及代码量 1.2.1 学习体会 1.这两周的学习懂得了循环结构的使用方法,懂得了在什么时候应该使用循环结构来处理问 ...

  5. 20190411RAID磁盘阵列及CentOS7系统启动流程

    RAID磁盘阵列及CentOS7系统启动流程(week2_day3)   RAID概念 磁盘阵列(Redundant Arrays of Independent Disks,RAID),有“独立磁盘构 ...

  6. jdbc笔记(一) 使用Statement对单表的CRUD操作

    jdbc连接mysql并执行简单的CRUD的步骤: 1.注册驱动(需要抛出/捕获异常) Class.forName("com.mysql.jdbc.Driver"); 2.建立连接 ...

  7. k8s集群安装

    准备三台虚拟机,一台做master,两台做master节点,关闭selinux. 一.安装docker,两node节点上进行 1. 2.安装docker依赖包:yum install -y yum-u ...

  8. 利用Android-FingerprintManager类实现指纹识别

    安卓指纹识别 利用FingerprintManager主类进行指纹识别. Github项目地址 在安卓6.0中新增了API,FingerprintManager类,它是Google提供的帮助访问指纹硬 ...

  9. [C++ Primer Plus] 第10章、对象和类（一）程序清单——辨析三个const

    程序清单10.1+10.2+10.3 头文件stock.h #ifndef STOCK00_H_ //先测试x是否被宏定义过 #define STOCK00_H_ //如果没有宏定义,就宏定义x并编译 ...

  10. 数据服务器------sql

    服务器:能够在网站中提供各种(浏览网页,收发邮件视频,语言)等服务器的软件与硬件集合. 数据库服务器(软件):(特点:永久海量存储数据:高速的查询){所有其他软件没有的特点} 数据库服务器分类 网状数 ...