PHP Laravel NGINX html css Bootstrap Python Symfony Apache Windows linux jquery Django ASP vanilla Slim vagrant docker Homestead MySQL Redis Git SVN ssh Root vim PhpStorm Pycharm sass less PHP Laravel android html css Vue Angular React NGINX html css Javascript

如何将PHP数组转化成Javascript变量

原创

原创不易 ~ 转载请注明出处哦

在我们前端开发的时候,经常需要从后端拉取数据,那么在获取数据的时候,怎么将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,浏览器将返回给我们对应的数组:
Console output

上面的示例中,我们看到的是将多维数组传递进json_encode产生的结果。
如果我们传入一维数组,在json_encode后赋值给Javascript变量,我们将直接得到一个一维数组,而非一个对象。


那么,我们在代码中应该如何实现从phpjavascript的转化呢?
通常可以使用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.managersemployees.staff来获取相应的数组数据了。


正在加载验证码......
请先完成验证