Image placeholder

如何在PHP或JavaScript中使用JSON数据

Image placeholder
F2EX 2017-08-13


JSON 用于在服务器和浏览器之间传输数据。以下是 .json 字符串中的一个基本示例。

{
  "name": "Tania",
  "title": "Web Developer",
  "website": "https://www.f2ex.cn"
}

正如你所看到的,它是一种可以存储在表中并且可读的数据格式。一些公司可能有公开的 .json 文件,您可以访问和从(可以连接的 API )中提取数据。您也可以将 .json 文件保存在您要从中提取数据的项目中。

JSON 数据可以被许多编程语言访问和使用。在本文中,我们将学习如何使用 PHP 和 JavaScript 访问 JSON 。在此之前你需要有一台支持 PHP 的服务器(本地或线上),以及需要了解编程概念(数组和变量)和使用 JavaScript 的基础知识。

什么是 JSON ?

JSON 代表 JavaScript Object Notation 。 数据保存在 .json 文件中,由一系列 key/value 组成。

{ "key": "value" }

任何 JSON key 的值都可以是 string, Boolean, number, null, array, 或 object (字符串,布尔值,数字,空值,数组或对象)。JSON 中不允许使用注释。

虽然 JSON 类似于一个对象或数组,但 JSON 是一个字符串。一个串行字符串,这意味着它可以被解析并解码成数据类型。

使用 PHP 中的 JSON 数据

首先,我们把 JSON 写入一个 PHP 字符串,并将其应用于一个名为 $data 的变量。

$data = '{
	"name": "Aragorn",
	"race": "Human"
}';

然后我们使用 json_decode() 函数将 JSON 字符串转换为 PHP 对象。

$character = json_decode($data);

现在我们可以将其作为 PHP 对象访问。

echo $character->name;

完整代码如下。

<?php

$data = '{
	"name": "Aragorn",
	"race": "Human"
}';

$character = json_decode($data);
echo $character->name;

浏览器输出:
[ Aragorn ]

从 URL 访问 JSON Feed

从这里开始,我们将把所有 JSON 数据放入 .json 文件中。这样,我们可以检索文件的内容,而不是将其保留为 PHP 字符串。

这是 data.json 的内容。

[
	{
		"name": "Aragorn",
		"race": "Human"
	},	
	{
		"name": "Legolas",
		"race": "Elf"
	},
	{
		"name": "Gimli",
		"race": "Dwarf"
	}
]

下面是如何在 PHP 中提取数据。

$url = 'data.json'; // 您的 JSON 文件的路径
$data = file_get_contents($url); // 将文件的内容放入变量中
$characters = json_decode($data); // 解码 JSON Feed

为了获得某一条数据,我们必须访问相应的数组编号。请记住,计数开始于 0 。

echo $characters[0]->name;

浏览器输出:
[ Aragorn ]

你还可以用 foreach 循环访问数组中的所有数据。

foreach ($characters as $character) {
	echo $character->name . '<br>';
}

浏览器输出:
[ Aragorn
Legolas
Gimli ]

完整代码如下。

<?php

$url = 'data.json'; // path to your JSON file
$data = file_get_contents($url); // put the contents of the file into a variable
$characters = json_decode($data); // decode the JSON feed

echo $characters[0]->name;

foreach ($characters as $character) {
	echo $character->name . '<br>';
}

我们还可以在表格中显示数据。

<table>
	<tbody>
		<tr>
			<th>Name</th>
			<th>Race</th>
		</tr>
			<?php	
			foreach ($characters as $character) {
				echo '<tr>';
				echo '<td>' . $character->name . '</td>';
				echo '<td>' . $character->race . '</td>';
				echo '</tr>';
			}
			?>
	</tbody>
</table>

浏览器输出:

Name Race
Aragorn Human
Gimli Dwarf
Legolas Elf
使用关联数组

还有另一种方法可以用 PHP 访问数据。如果您在 json_decode() 中传递 true作为参数,则数据将成为关联数组而不是对象。这意味着我们将使用方括号符号 [] 而不是向右的箭头 ->

$characters = json_decode($data, true); // 解码 JSON Feed 并创建一个关联数组

我们将使用 ['race'] 访问该值,而不是 -<race

echo $characters[0]['race'];

然后在浏览器中应该可以看到输出:[ Human ]

下面是循环访问。

foreach ($characters as $character) {
	echo $character['race'] . '<br>';
}

浏览器输出:
[ Human
Elf
Dwarf ]

从嵌套数组获取数据

到目前为止,我们仅使用带有 key/value 的 JSON Feed ,但通常都会遇到嵌套。下面是另一个例子,我们可以保存在一个名为 wizards.json 的新文件中。

[
	{
		"name": "Harry Potter",
		"wand": [
			{
				"core": "phoenix feather",
				"length": "11 inches",
				"wood": "holly"
			}
		]
	},
	{
		"name": "Hermione Granger",
		"wand": [
			{
				"core": "dragon heartstring",
				"length": "10 and 3/4 inches",
				"wood": "vine"
			}
		]
	}
]

解码 Feed。

$url = 'wizards.json'; 
$data = file_get_contents($url); 
$wizards = json_decode($data, true);

我们可以使用循环中的 $wizard['key'][0]['key'] 访问嵌套数组,或者如果只想打印一个,需要将数字序号正确对应。

foreach ($wizards as $wizard) {
	echo $wizard['name'] . '\'s wand is ' . 
			 $wizard['wand'][0]['wood'] . ', ' . 
		   $wizard['wand'][0]['length'] . ', with a ' . 
		   $wizard['wand'][0]['core'] . ' core. <br>' ;
}

浏览器输出:
[ Harry Potter’s wand is holly, 11 inches, with a phoenix feather core.
Hermione Granger’s wand is vine, 10 and 3/4 inches, with a dragon heartstring core. ]

将 PHP 对象或数组转换为 JSON

正如您使用 json_decode() 将 JSON 转换为 PHP ,同样的您也可以使用 json_encode() 将 PHP 转换为 JSON 。

$data = [
	'name' => 'Aragorn',
	'race' => 'Human'
];

echo json_encode($data);

我们在上面的示例中制作了一个 PHP 数组并进行了编码。以下是输出:
[ {“name”:”Aragorn”,”race”:”Human”} ]

使用 JavaScript 中的 JSON 数据

我们创建一个名为 data 的 JavaScript 变量并应用 JSON 字符串。

var data = '[ { "name": "Aragorn", "race": "Human" }, { "name": "Gimli", "race": "Dwarf" } ]'; 

现在我们使用 JavaScript 内置的 JSON.parse() 函数来解码字符串。

data = JSON.parse(data); 

从这里我们可以像常规的 JavaScript 对象那样访问数据。

console.log(data[1].name);

浏览器输出:
[ Gimli ]

我们可以用 for 循环遍历每个迭代。

for (var i = 0; i < data.length; i++) {
	console.log(data[i].name + ' is a ' + data[i].race + '.');
}

浏览器输出:
[ Aragorn is a Human.
Gimli is a Dwarf. ]

很简单吧!现在,我们可能需要从 URL 访问 JSON 。还有一个额外的步骤,我们必须向文件发出请求。让我们把上面的 JSON 字符串放在 data.json 中。

[
	{
		"name": "Aragorn",
		"race": "Human"
	},
	{
		"name": "Gimli",
		"race": "Dwarf"
	}
]

现在我们制作一个 XMLHttpRequest() 。

var request = new XMLHttpRequest();

我们将通过 GET( URL )请求打开文件( data.json )。

request.open('GET', 'data.json', true);

从这里,我们解析并处理 onload 函数中的所有 JSON 数据。

request.onload = function () {
	// 在这里开始访问JSON数据
}

然后最后提交请求。

request.send();

下面是完整代码。

var request = new XMLHttpRequest();

request.open('GET', 'data.json', true);

request.onload = function () {
	// begin accessing JSON data here
	var data = JSON.parse(this.response);

	for (var i = 0; i < data.length; i++) {
		console.log(data[i].name + ' is a ' + data[i].race + '.');
	}
}

request.send();

浏览器输出:
[ Aragorn is a Human.
Gimli is a Dwarf. ]

使用 jQuery

您可以看到,使用纯 JavaScript 检索 JSON Feed 并不难。然而,使用 jQuery 中的 getJSON() 函数更加容易。当然,你需要在任何此自定义代码之前加载 jQuery库

$(document).ready(function () {
	$.getJSON('data.json', function (data) {
		// 在这里开始访问JSON数据
			console.log(data[0].name);
	});
});

您可能还会看到 jQuery 通过 AJAX 请求访问 JSON ,下面是一个更详细的。

	$(document).ready(function () {
		var data;
		$.ajax({
			dataType: "json",
			url: 'data.json',
			data: data,
			success: function (data) {
				// begin accessing JSON data here
				console.log(data[0].name);
			}
		});
	});

两者将具有相同的输出:
[ Aragorn ]

注意:文章中所示的浏览器输出中的 [] 符号,在实际显示中并没有,只被用做标注。

原文:https://www.taniarascia.com/how-to-use-json-data-with-php-or-javascript/


2017-08-13