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/