在我们前端开发的时候,经常需要从后端拉取数据,那么在获取数据的时候,怎么将PHP
数组转化成Javascript
变量呢?
答案很简单,使用PHP
自带的json_encode
函数:
string json_encode ( mixed $value [, int $options = 0 [, int $depth = 512 ]] )
以上函数取自官方文档。
该函数可以输入一个PHP
数组,并将数组转化为JSON
格式。
举例来说,假设我们有一个PHP
数组:
$example_array =
[
'managers' => ['Eagle', 'Tom', 'Mike'],
'staff' => ['Mary', 'John', 'Tony'],
]
我们调用json_encode
,然后看看$example_array
变成了什么样子:
$result_array = json_encode($example_array);
var_dump($result_array);
{"managers":["Eagle","Tom","Mike"],"staff":["Mary","John","Tony"]}
我们看到,数组已经成为了JSON
形式,那么怎么样将其转化为Javascript
变量呢?
很简单,只需要直接将其赋值给Javascript
变量即可。我们一起来操作一下。
首先我们打开浏览器(我以Chrome
作为演示工具),右键审查元素,点开与Elements
(元素)并排的Console
一栏,点击空白处出现光标,输入以下代码:
var employees = {"managers": ["Eagle", "Tom", "Mike"], "staff":["Mary", "John", "Tony"]};
按回车键,我们会看到undefined
字样,没有关系,我们继续输入
employees
这个时候你会发现浏览器输出:
{managers: Array(3), staff: Array(3)}
managers: (3) ["Eagle", "Tom", "Mike"]
staff: (3) ["Mary", "John", "Tony"]
__proto__: Object
我们看到,这个时候employees
已经是一个包含了我们数组数据的对象了。
如果我们输入employees.managers
或者employees.staff
,浏览器将返回给我们对应的数组:
上面的示例中,我们看到的是将多维数组传递进
json_encode
产生的结果。
如果我们传入一维数组,在json_encode
后赋值给Javascript
变量,我们将直接得到一个一维数组,而非一个对象。
那么,我们在代码中应该如何实现从php
到javascript
的转化呢?
通常可以使用ajax
函数回传数据或者在php
框架中利用模板语言赋值:
//利用ajax将JSON格式数据回传
//resp.employees即JSON格式的数据
.axios({
url: 'array-conversion',
method: 'GET'
})
.then(function(resp) {
let resp = resp.data;
if (resp.success) {
let employees = resp.employees;
console.log(employees.managers);
console.log(employees.staff);
}
});
上面代码段我们使用了axios
库调用了ajax
函数获取JSON
格式的数组数据。可以看到,我们直接将其赋值给了本地变量employees
。这样一来我们就可以直接通过employees.managers
及employees.staff
来获取相应的数组数据了。